I am using SlickGrid to display a grid and just upgraded Slick grid to it latest version from previous version 2.

I was able o work out the setup pretty fine except one issue with Flatpickr date.

Where the value in the cell is “11/09/2023” i.e 11 Sep 2023.

When I open the Flatpicker the calendar open on the correct date i.e 11 Sep 2023 where as the cell value changes to “09/11/2023” i.e 09 Nov 2023

I tried as below to setup the Flatpickr with the correct format as d/m/Y. i.e. date/month/year

Any insight on how to change this behavior would a great help.

this.Init = function () {
        CustomSlickLib(DATE_FORMAT);
        this.processRawData();
        this.idColumn = this.gridData.idCol;
    };

---------
function CustomSlickLib(dateFormat) {
    $.datepicker.setDefaults(dateFormat);

    if (typeof Slick.Custom !== "undefined") {
        // Slick.Custom has been defined
        return;
    }

    $.extend(Slick, {
        Custom: {
            Formatters: {
                Date: DateFormatter,
                .
                .
                .
            },
            Editors: {
                .
                .
                .
            }
        }
    });

   
    /// DateFormatter
    function DateFormatter(row, cell, value, columnDef, dataContext, grid) {
        if (value && value !== "") {
            var dateFormat = grid.getOptions().dateFormat;
            var d = dateFormat && dateFormat !== "" ? $.datepicker.parseDate(dateFormat, value) : new Date(value);
            d = d.toLocaleDateString(grid.getOptions().locale);
            return d;
        }
        else {
            return value;
        }

    }
.
.
.
.
}

--------------

this.processRawData = function () {
.
.
.
.

case "date":
                        c.editor = Slick.Editors.Flatpickr;
                        c.width = c.width > 150 ? 150 : c.width;
                        c.maxWidth = 150;
                        if (c.MinValue || c.MaxValue || c.ganttEndDate || c.ganttStartDate) {
                            c.validator = GL_DateValidator;
                            c.validationErrText = getErrText(c);
                        }
                        c.dateFormat = "d-m-Y";
                        c.parseDate = function (dateStr) {
                            return moment(dateStr, "DD/MM/YYYY").toDate();
                        },
                        c.formatter = Slick.Custom.Formatters.Date;
                        break;[![enter image description here][1]][1]
.
.
.
.
});