The problem

Suppose a custom Umbraco 8 backoffice view contains an <umb-date-time-picker>. A business rule, button, API response, or another editor action determines that the date should change programmatically.

Setting the AngularJS value is straightforward when the control is initialized. The less obvious case is changing the already-rendered picker and keeping its UI in sync. The important detail is that the Umbraco directive uses flatpickr underneath, so the rendered control has its own picker state.

Why the underlying flatpickr instance matters

flatpickr exposes an instance API for changing an existing calendar. Its setDate() method updates the selected date, and the instance can also be reached from an initialized input through its _flatpickr property.

That gives us a direct way to update the DateTime Picker after initialization rather than manipulating the input text manually.

Set up the Umbraco DateTime Picker

A typical AngularJS view can bind the picker to the controller model and pass the flatpickr callback arguments through on-change:

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

For a 24-hour date and time value in dd/MM/yyyy HH:mm form, the corresponding configuration is:

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

An initial model value can then use the same format:

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

Parse the date reliably 

function parseDateTime(value) {
    const [datePart, timePart] = value.split(" ");
    const [day, month, year] = datePart.split("/").map(Number);
    const [hour, minute] = timePart.split(":").map(Number);

    return new Date(year, month - 1, day, hour, minute, 0);
}

Set the DateTime Picker value programmatically

If you already have access to the flatpickr instance from the picker callback, keep that reference and use it later. This avoids searching the entire document for the first element with a generic class.

let datePickerInstance = null;

vm.datePickerFromChange = function (selectedDates, dateStr, instance) {
    datePickerInstance = instance;
};

vm.setDateFrom = function (value) {
    if (!datePickerInstance)
        return;

    const date = parseDateTime(value);

    datePickerInstance.setDate(date, true);
    vm.dateFrom = value;
};

The second argument passed to setDate() is true, which tells flatpickr to trigger its change callbacks. Whether you want that depends on your custom logic; omit it or pass false if changing the value should not trigger the picker change flow.

Fallback: retrieve the instance from the input 

const input = document.querySelector(".flatpickr-input");
const instance = input?._flatpickr;

if (instance) {
    instance.setDate(parseDateTime("12/08/2030 15:45"), true);
}

Common pitfalls

  • Using a global selector. The first .flatpickr-input on the page may belong to another property or component.

  • Parsing localized date strings with new Date(string). Parse a known format explicitly or use flatpickr's parsing support.

  • Forgetting the zero-based month. JavaScript months passed to the numeric Date constructor range from 0 to 11.

  • Triggering change logic unintentionally. The second setDate() argument controls whether the change event fires.

  • Treating this as a current Umbraco pattern. This code belongs to the AngularJS-based Umbraco 8 backoffice and should stay isolated in legacy maintenance code.

Complete example 

angular.module("umbraco").controller("MyDateController", function () {
    const vm = this;
    let datePickerInstance = null;

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

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

    vm.datePickerFromChange = function (selectedDates, dateStr, instance) {
        datePickerInstance = instance;
    };

    vm.setDateFrom = function (value) {
        if (!datePickerInstance)
            return;

        datePickerInstance.setDate(parseDateTime(value), true);
        vm.dateFrom = value;
    };

    function parseDateTime(value) {
        const [datePart, timePart] = value.split(" ");
        const [day, month, year] = datePart.split("/").map(Number);
        const [hour, minute] = timePart.split(":").map(Number);

        return new Date(year, month - 1, day, hour, minute, 0);
    }

    return vm;
});

Conclusion

For an Umbraco 8 AngularJS backoffice extension, the key is to distinguish the AngularJS model from the rendered date picker's state. Once you have the flatpickr instance, setDate() provides the API you need to cleanly update the control.

For maintainable legacy code, keep the picker instance scoped to your controller or component, parse custom date formats explicitly, and avoid document-wide selectors whenever possible.

References