UmbraCare LOGO

Programmatically Setting Umbraco DateTime Picker with AngularJs

Learn step-by-step how to set the Umbraco CMS DateTime Picker programmatically using AngularJs. Avoid pitfalls and enhance user experience in the Umbraco 8.4.0 back office

Published on: , by:
Piotr Bach
Piotr Bach
Wojciech Tengler
Wojciech Tengler
Umbraco

Table of contents

Introduction to Umbraco DateTime Picker with AngularJs

In this guide, discover the straightforward steps to set up the DateTime control in the Umbraco CMS back office. 

Through my experience, I realized the need for a concise solution to refresh the date time picker control under business-specific conditions using AngularJs.

While working on Umbraco 8.4.0, I encountered specific challenges.

This article is aimed at sharing that solution and making the process smoother for developers like you.

Understanding the Umbraco's Underlying library - flatpickr

It's crucial to know that Umbraco's <umb-date-time-picker> directive is powered by flatpickr – an efficient, lightweight date-time picker.

Before diving deep, I suggest glancing through the official flatpickr documentation here and referring to this helpful discussion thread.

It'll provide a deeper understanding and may save you precious debugging time.

Setting Up Your View and Controller

Assuming the standard setup, the HTML view for the directive should look something like:

<umb-date-time-picker ng-model="vm.dateFrom"
            options="vm.dateTimeConfig"
            on-change="vm.datePickerFromChange(selectedDates, dateStr, instance)">
</umb-date-time-picker>

Configuration for DateTime picker:

$scope.vm.dateTimeConfig = {
        enableTime: true,
        dateFormat: "d/m/Y H:i",
        time_24hr: true
 };

And initializing the dateFrom:

$scope.vm.dateFrom = "12/03/2020 15:45";

Handy Tools: Converting DateTime String to Date Object

Having a reliable function to convert datetime strings into Date() objects can be a lifesaver.

Here's one such utility function:

function convertToDateTime(sDateTime) {
	sDateTime = sDateTime.split(" ");

	var date = sDateTime[0].split("/");
	var yyyy = date[2];
	var mm = date[1] - 1;
	var dd = date[0];

	var time = sDateTime[1].split(":");
	var h = time[0];
	var m = time[1];

	return new Date(yyyy, mm, dd, h, m, 0);
}

Setting the Umbraco DateTime Picker in AngularJs

To programmatically set the DateTime picker value, begin by accessing the current flatpickr instance.

Following this, the setDate() function from the flatpickr library can be utilized.

A point to note: I had to convert the string value into a Date object for setting the value correctly.

The direct use of string was unsuccessful in my attempts.

Below is the complete working code:

let currentFlatpickrInstance = document.getElementsByClassName("flatpickr-input")[0]._flatpickr;
currentFlatpickrInstance.setDate(convertDateTime("12/08/2030 15:45"))

Wrapping Up

Navigating through the maze of Umbraco's DateTime Picker using AngularJs doesn't have to be a daunting task.

With the right approach and understanding of underlying tools like flatpickr, it becomes much more straightforward.

I hope this guide alleviates some common challenges faced during the process.

Need further assistance or have questions?

Contact us today for expert guidance, or check out our blog for insights into Umbraco and other web development topics.

Related articles

↑ Top ↑