Tailwind CSS / Metronic Date Picker – how to open calendar on month of selected date from value
Hi,
I’m working with a Tailwind CSS / Metronic date picker and I have a problem with preselecting a date and opening the calendar on the correct month.
Current HTML:
<!--begin::Input with Calendar-->
<div class="kt-input w-64">
<i class="ki-outline ki-calendar"></i>
<input
class="grow"
type="text"
id="input-date-picker"
value="2026-01-02"
placeholder="Select a date"
readonly
data-kt-date-picker="true"
data-kt-date-picker-input-mode="true"
data-kt-date-picker-position-to-input="left"
/>
</div>
<!--end::Input with Calendar-->Problem
-The input correctly shows the value 2026-01-02
-The date picker opens
-But the calendar does not highlight/select this date
-The calendar always opens on the current month, not on January 2026
Questions
-Is it possible to make the calendar open on the month that contains the date provided in the input value?
-Is there a way to preselect/highlight the date from value automatically?
-Does Metronic require:
-a specific date format?
-a dedicated data attribute (e.g. data-kt-date-picker-default-date)?
-or manual JavaScript initialization (e.g. setting the date after init)?
-Is this behavior related to the input being readonly?
What I’m looking for
Ideally, I would like:
-the date picker to read the date from the input value
-open the calendar on the correct month
-and have the date already selected/highlighted
Any example or guidance on how to achieve this would be very helpful.
Thanks in advance!
Replies (1)
Hi
The Metronic date picker (and the underlying Vanilla Calendar Pro) does not read the input’s value when it initializes. It only uses explicit options. To open on the correct month and have the date selected, pass the initial state via data attributes on the same element that has data-kt-date-picker="true" (your input):
1. Selected date – use data-kt-date-picker-selected-dates with a JSON array of date strings in YYYY-MM-DD (your 2026-01-02 is already in the right format).
2. Month and year shown – use data-kt-date-picker-selected-month and data-kt-date-picker-selected-year so the calendar opens on that month. Month is 0‑indexed (0 = January, 11 = December).
Example for 2 Jan 2026:
<input
class="grow"
type="text"
value="2026-01-02"
placeholder="Select a date"
readonly
data-kt-date-picker="true"
data-kt-date-picker-input-mode="true"
data-kt-date-picker-position-to-input="left"
data-kt-date-picker-selected-dates="["2026-01-02"]"
data-kt-date-picker-selected-month="0"
data-kt-date-picker-selected-year="2026"
/>- Format: YYYY-MM-DD is required for the date strings.
- No separate “default date” attribute is needed; selectedDates is what both selects and drives the displayed month when used with selectedMonth and selectedYear.
readonly is unrelated; the component simply doesn’t read value at init.
If the initial date is dynamic (e.g. from a server), you can either:
- Render the same three attributes in your template with the desired date/month/year, or
- After the page loads, create the picker via JS and pass a config object that includes selectedDates, selectedMonth, and selectedYear (the component merges constructor config with data attributes).
Sources:
