How to set Umbraco CMS DateTime Picker programmatically in AngularJs
Introduction
In this short article, I am going to show the steps needed to set up date-time control programmatically in the Umbraco CMS back office.
Recently, I had to refresh the date time picker control value under certain business-logic conditions directly in the angularJs controller.
I had some issues, so I decided to write this text and share my working code.
My working project was based on Umbraco 8.4.0.
Before we start, it is worth mentioning that <umb-date-time-picker> directive uses flatpickr – a lightweight and powerful date time picker.
I encourage you to read the official documentation on https://flatpickr.js.org/ website and check this thread https://github.com/flatpickr/flatpickr/issues/484.
It took me a while to find this, so hopefully, you can save some time ⌛.
We can certainly find a lot more interesting things to do than messing around with the good old 👴 angularJs 🙂.
Let’s go!
View, Controller setup
Let’s assume the following setup:
The view
In my case, <umb-date-time-picker> directive in HTML view looked as follows:
<umb-date-time-picker ng-model="vm.dateFrom"
options="vm.dateTimeConfig"
on-change="vm.datePickerFromChange(selectedDates, dateStr, instance)">
</umb-date-time-picker>
Datetime picker config settings
$scope.vm.dateTimeConfig = {
enableTime: true,
dateFormat: "d/m/Y H:i",
time_24hr: true
};
Initial dateFrom setup:
$scope.vm.dateFrom = "12/03/2020 15:45";
Handy function converting datetime string to Date() object:
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 Umbraco DateTime Picker value in AngularJs
First, you need to retrieve the current flatpickr instance.
Then just use setDate() function https://flatpickr.js.org/instance-methods-properties-elements/#setdate-date-triggerchange-datestrformat .
According to the documentation: Info! setDate(date, triggerChange, dateStrFormat) Sets the current selected date(s) to date, which can be a date string, a Date, or anArray of the Dates. Optionally, pass true as the second argument to force any onChange events to fire. And if you’re passing a date string with a format other than your dateFormat, provide a dateStrFormat e.g. “m/d/Y”.
Before setting the value I had to convert the string value to a Date object using convertToDateTime function.
For some reason, setting the string value directly did not work for me.
The whole working snippet looked as follows:
let currentFlatpickrInstance = document.getElementsByClassName("flatpickr-input")[0]._flatpickr;
currentFlatpickrInstance.setDate(convertDateTime("12/08/2030 15:45"))
Final words
I hope you find this short post useful and you can adapt it to your needs. That’s it, have a nice day! 👌