Hi Guest,

Understanding

When selecting a date with DD/MM/YYYY format, the DatePicker displays the previous day (e.g., selecting 06/06 shows 05/06). This affects the documentation examples as well.

Solution

This is a known issue caused by JavaScript's UTC date handling. When the calendar stores a selected date, it creates a Date object at midnight UTC. In negative UTC offset timezones (Americas, etc.), that UTC midnight falls on the previous local day, so the formatted output shows one day behind.

Immediate workaround: Use YYYY-MM-DD format, which tends to handle UTC/local conversion more reliably:

<input
  data-kt-date-picker="true"
  data-kt-date-picker-date-format="YYYY-MM-DD"
  readonly
  type="text"
/>

For DD/MM/YYYY specifically: If you need this format, you can intercept the date selection and apply a timezone offset correction:

const picker = KTDatePicker.getInstance(document.getElementById('my-datepicker'));
const calendar = picker.getCalendar();

// Override the date format to use local dates instead of UTC
calendar.set({
  // Use your local offset to correct the date
  selectedDates: picker.getSelectedDates().map(d => {
    const date = new Date(d);
    date.setMinutes(date.getMinutes() + date.getTimezoneOffset());
    return date.toISOString().split('T')[0];
  })
});

This is a bug in how the DatePicker internally handles date-to-string conversion. I'll escalate this to our development team for a proper fix in an upcoming release.

Sources

• Date Picker Docs

Next Steps

• Try the YYYY-MM-DD format as a workaround
• If you need DD/MM/YYYY, use the timezone offset correction above
• Our team will work on fixing this in a future Metronic update

This reply was generated by AI. A human will follow up if needed.