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:
Configuration for DateTime picker:
And initializing the dateFrom:
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:
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:
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.