Flatpickr - Date changes automatically to american version instead of UK Format.

Question

I am using flat pickr and the date that gets given to the input would be as such:

01/02/1991 (Day 1 / Month Feb / Year 1991.

However when I add the class flatpickr it converts the date to:

02/01/1991

The american version of the date.

I thought that I could fix this easily by doing the below code:

init() {
    let flatPicker = document.querySelector('.flatpickr')

    if (flatPicker) {
        flatPickr.l10ns.default.weekdays.shorthand = ['S', 'M', 'T', 'W', 'T', 'F', 'S']

        new flatPickr(flatPicker,
            {
                nextArrow: '<svg class="icon icon-arrow-right"><use xlink:href="/dist/assets/svg-definition/symbol-defs.svg#icon-arrow-right"></use></svg>',
                prevArrow: '<svg class="icon icon-arrow-left"><use xlink:href="/dist/assets/svg-definition/symbol-defs.svg#icon-arrow-left"></use></svg>',

                // Date format
                altInput: true,
                altFormat: 'd-m-Y',

                // Default Date
                dateFormat: 'd-m-Y'
            }
        );
    }
}

The important bit I thought would be the dateFormat: 'dm-Y'.

Can anyone else spot what I am doing wrong here?

Many thanks

Answer 1

You need a custom date parser. Because dmy is not standard date format. Before flatpickr() add this code below and it needs moment.js

Flatpickr.defaultConfig.parseDate = function(str) {
    return moment.utc(str, "DD.MM.YYYY").toDate();
}