Jump to Section
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.