Change date format of flatpickr

Flatpickr is initiaized by IHP with a European date format.

I need to change it to a US date format (m.d.y). What would be the right way to override it?

In Drupal, a common way to override existing code is by he fact we have all those functions inside an object.

So imagine we had IHP.initDatePicker = function () { .... Then in user code, we could redeclare that function.

Maybe there’s a simpler way?

1 Like

To answer myself, I can do something like this, assuming my app.js is loaded after IHP core’s helpers.js

// Custom date picker initialization, override the default implementation.
$(document).on('ihp:load', () => {
    // Your custom initDatePicker override
    window.initDatePicker = function() {

        if (!('flatpickr' in window)) {
            return;
        }
        flatpickr("input[type='date']", {
            altFormat: 'm.d.y',
        });
        flatpickr("input[type='datetime-local']", {
            enableTime: true,
            time_24hr: true,
            dateFormat: 'Z',
            altInput: true,
            altFormat: 'm.d.y, H:i',
        });
    };
});

I didn’t see a change in the format, but I didn’t dive too deep. I think for my case I’ll actually not include the flatpicker.js at all, since the browser’s already has a good enough widget, that shows the format based on the computer’s local.