Super Sale
Limited Time 50% OFF for All-Access Plans
Save 50% Now
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 (0)
There is no reply for this question at the moment. Be first to leave a reply.
