Wrong date selected in DatePicker
I'm trying to use the Metronic DatePicker component with the following configuration:
I'm using Metronic 9.4.12 (Tailwind version) and the DatePicker component as documented.
The DatePicker is configured to use the pt-BR locale and display dates in the DD/MM/YYYY format. However, when I select a date from the calendar, the value displayed in the input is always one day earlier than the date I selected.
For example:
- Selecting 06/06 displays 05/06.
- Selecting 07/06 displays 06/06.
The issue seems to occur only when using the data-kt-date-picker-date-format="DD/MM/YYYY" attribute.
I also noticed that the same behavior can be reproduced in the DatePicker examples from the official documentation.
Has anyone experienced this issue? Is there a known fix, workaround, or additional configuration required to prevent this behavior?
Additional information:
- Metronic version: 9.4.12
- Tailwind version
- Locale: pt-BR
- Custom date format: DD/MM/YYYY
Replies (1)
Hi Bruno,
Understanding
You're seeing the selected date shift back by one day when using DD/MM/YYYY format with the pt-BR locale in Metronic 9.4.12. This is a known issue.
Solution
The root cause is a JavaScript date parsing pitfall. Vanilla Calendar Pro stores selected dates as YYYY-MM-DD strings (e.g., 2024-06-07). When the DatePicker formats this, it calls new Date("2024-06-07"), which JavaScript parses as UTC midnight. Then date.getDate() returns the local day — which is the previous day in any timezone west of UTC (like Brazil).
Workaround: Override the _formatDate method to force local-time parsing:
const picker = KTDatePicker.getInstance(document.getElementById('your-input-id'));
const origFormat = picker._formatDate.bind(picker);
picker._formatDate = function(dateStr, format, time, timeMode) {
const fixed = typeof dateStr === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(dateStr)
? dateStr + 'T00:00:00'
: dateStr;
return origFormat(fixed, format, time, timeMode);
};
Adding T00:00:00 makes new Date() parse as local midnight instead of UTC midnight — no timezone shift.
Long-term fix: Update to Metronic v9.5.0+ which includes the fix for this issue.
Sources
- vanilla-calendar-pro#130 — upstream issue report
- Metronic v9 Docs
Next Steps
- Apply the workaround above for your current version
- Update to Metronic v9.5.0+ when possible — the fix is included in the latest release
- If the issue persists after updating, check your browser timezone settings and share which browser you're using
This reply was generated by AI. A human will follow up if needed.
