Disable Future Dates in Metronic Datepicker for Date of Birth Field
I purchased the Metronic theme and I am using its datepicker component. Currently, there is an option/example available to disable past dates, but I need the opposite behavior. For the Date of Birth field, I want to disable all future dates so users can only select today’s date or any past date. I could not find a direct option or configuration for this in the theme documentation. How can I implement this properly in Metronic datepicker?
Replies (1)
Hi
Metronic v9 Tailwind Datepicker supports the data-kt-date-picker-date-max attribute to set the maximum selectable date. To disable all future dates, set it to today's date.
You have two options:
Option 1 — Static max date (via data attribute) Set data-kt-date-picker-date-max to today's date in your HTML:
<div class="kt-input w-64">
<i class="ki-outline ki-calendar"></i>
<input class="grow"
data-kt-date-picker="true"
data-kt-date-picker-input-mode="true"
data-kt-date-picker-position-to-input="left"
data-kt-date-picker-date-max="2026-05-12"
placeholder="Select date of birth"
readonly
type="text"/>
</div>Option 2 — Dynamic max date via JavaScript If you need it to always be current, set it programmatically:
<div class="kt-input w-64">
<i class="ki-outline ki-calendar"></i>
<input class="grow"
data-kt-date-picker="true"
data-kt-date-picker-input-mode="true"
data-kt-date-picker-position-to-input="left"
placeholder="Select date of birth"
readonly
type="text"/>
</div>
<script>
// Set max date to today
const today = new Date().toISOString().split("T")[0];
document.getElementById("dob-picker").setAttribute("data-kt-date-picker-date-max", today);
</script>This works for both single date and input mode pickers. The calendar will grey out and prevent selection of any date after the specified max date.
