Default Date Picker
To add a basic date picker with default styling, use the
data-kt-date-picker
attribute on a container element.
The calendar will be initialized automatically when the page loads.
Input Mode
To attach a calendar to an input field, use the
data-kt-date-picker-input-mode="true"
attribute.
The calendar will appear when the input is focused and automatically update the input value when a date is selected.
<!--begin::Input with Calendar-->
<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" id="input-date-picker" placeholder="Select a date" readonly="" type="text"/>
</div>
<!--end::Input with Calendar-->
Basic Input (No Icon)
A simple date picker input without an icon. Use the
kt-input
class directly on the input element.
Calendar Position
Control the horizontal position of the calendar popup relative to the input using
data-kt-date-picker-position-to-input
.
Available values:
left
,
center
,
and
right
.
<!--begin::Position Left-->
<div class="kt-input w-48">
<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" id="position-left-input" placeholder="Position left" readonly="" type="text"/>
</div>
<!--end::Position Left-->
<!--begin::Position Center-->
<div class="kt-input w-48">
<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="center" id="position-center-input" placeholder="Position center" readonly="" type="text"/>
</div>
<!--end::Position Center-->
<!--begin::Position Right-->
<div class="kt-input w-48">
<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="right" id="position-right-input" placeholder="Position right" readonly="" type="text"/>
</div>
<!--end::Position Right-->
Custom Date Format
Customize the date format displayed in the input using
data-kt-date-picker-date-format
.
Common formats:
DD/MM/YYYY
,
MM/DD/YYYY
,
YYYY-MM-DD
,
DD.MM.YYYY
.
Supported tokens:
YYYY
,
YY
,
MM
,
DD
,
MMMM
(full month),
MMM
(short month),
dddd
(full weekday),
ddd
(short weekday).
<!--begin::Custom Format Input (DD/MM/YYYY)-->
<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-date-format="DD/MM/YYYY" data-kt-date-picker-input-mode="true" data-kt-date-picker-position-to-input="left" data-kt-date-picker-selected-dates='["2024-12-03"]' id="custom-format-input" readonly="" type="text" value="03/12/2024"/>
</div>
<!--end::Custom Format Input-->
Date Range Selection
Enable date range selection with two months displayed side by side using
data-kt-date-picker-selection-dates-mode="multiple-ranged"
,
data-kt-date-picker-type="multiple"
, and
data-kt-date-picker-display-months-count="2"
.
Includes Reset and Apply action buttons for user confirmation.
<!--begin::Date Range Input-->
<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-action-buttons="true" data-kt-date-picker-display-months-count="2" data-kt-date-picker-input-mode="true" data-kt-date-picker-months-to-switch="1" data-kt-date-picker-position-to-input="left" data-kt-date-picker-selection-dates-mode="multiple-ranged" data-kt-date-picker-type="multiple" id="date-range-input" placeholder="Select date range" readonly="" type="text"/>
</div>
<!--end::Date Range Input-->
Preselected Date Range
Set default start and end dates for a date range picker using
data-kt-date-picker-selected-dates
with a JSON array of date strings in YYYY-MM-DD format.
Combine with
data-kt-date-picker-selection-dates-mode="multiple-ranged"
for range selection.
<!--begin::Preselected Date Range Input-->
<div class="kt-input w-72">
<i class="ki-outline ki-calendar">
</i>
<input class="grow" data-kt-date-picker="true" data-kt-date-picker-action-buttons="true" data-kt-date-picker-display-months-count="2" data-kt-date-picker-input-mode="true" data-kt-date-picker-months-to-switch="1" data-kt-date-picker-position-to-input="left" data-kt-date-picker-selected-dates='["2025-01-15", "2025-01-16", "2025-01-17", "2025-01-18", "2025-01-19", "2025-01-20", "2025-01-21", "2025-01-22"]' data-kt-date-picker-selected-month="0" data-kt-date-picker-selected-year="2025" data-kt-date-picker-selection-dates-mode="multiple-ranged" data-kt-date-picker-type="multiple" id="preselected-range-input" placeholder="Select date range" readonly="" type="text" value="2025-01-15 - 2025-01-22"/>
</div>
<!--end::Preselected Date Range Input-->
Multiple Dates Selection
Allow users to select multiple individual dates using
data-kt-date-picker-selection-dates-mode="multiple"
.
Combined with
data-kt-date-picker-action-buttons="true"
to show
Reset and Apply buttons, keeping the calendar open until the user confirms their selection.
<!--begin::Multiple Dates Input-->
<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-action-buttons="true" data-kt-date-picker-input-mode="true" data-kt-date-picker-position-to-input="left" data-kt-date-picker-selection-dates-mode="multiple" id="multiple-dates-input" placeholder="Select multiple dates" readonly="" type="text"/>
</div>
<!--end::Multiple Dates Input-->
Min/Max Date Constraints
Set minimum and maximum selectable dates using
data-kt-date-picker-date-min
and
data-kt-date-picker-date-max
. Control the visible date range with
data-kt-date-picker-display-date-min
and
data-kt-date-picker-display-date-max
.
<!--begin::Min/Max Dates Input-->
<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-date-max="2030-12-31" data-kt-date-picker-date-min="2020-01-01" data-kt-date-picker-display-date-max="2025-12-31" data-kt-date-picker-display-date-min="2024-01-01" data-kt-date-picker-input-mode="true" data-kt-date-picker-position-to-input="left" id="min-max-input" placeholder="Select date (2024-2025)" readonly="" type="text"/>
</div>
<!--end::Min/Max Dates Input-->
Disable Past Dates
Disable past dates using
data-kt-date-picker-disable-dates-past="true"
.
This is useful for booking systems or future date selections.
<!--begin::Disable Past Dates Input-->
<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-disable-dates-past="true" data-kt-date-picker-input-mode="true" data-kt-date-picker-position-to-input="left" id="disabled-dates-input" placeholder="Future dates only" readonly="" type="text"/>
</div>
<!--end::Disable Past Dates Input-->
Disable Weekends
Disable specific weekdays using
data-kt-date-picker-disable-weekdays
.
Values:
0
(Sunday) through
6
(Saturday).
Use
[0, 6]
to disable weekends.
<!--begin::Disable Weekends Input-->
<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-disable-weekdays="[0, 6]" data-kt-date-picker-input-mode="true" data-kt-date-picker-position-to-input="left" id="disable-weekdays-input" placeholder="Weekdays only" readonly="" type="text"/>
</div>
<!--end::Disable Weekends Input-->
Highlight Weekends
Add the
vc-highlight-weekends
class to the parent container to highlight
weekend days (Saturday and Sunday) in a different color. This makes it easier for users to
identify non-working days in the calendar.
<!--begin::Highlight Weekends Input-->
<div class="kt-input w-64 vc-highlight-weekends">
<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" id="highlight-weekends-input" placeholder="Select a date" readonly="" type="text"/>
</div>
<!--end::Highlight Weekends Input-->
Time Picker
Enable time selection using
data-kt-date-picker-selection-time-mode="12"
for 12-hour format
or
data-kt-date-picker-selection-time-mode="24"
for 24-hour format.
<!--begin::Time Picker Input (12-hour)-->
<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-selection-time-mode="12" id="time-picker-input" placeholder="Select date & time" readonly="" type="text"/>
</div>
<!--end::Time Picker Input-->
24-Hour Time Format
Enable 24-hour time format using
data-kt-date-picker-selection-time-mode="24"
.
<!--begin::24-hour Time Picker Input-->
<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-selection-time-mode="24" id="time-24h-input" placeholder="Select date & time (24h)" readonly="" type="text"/>
</div>
<!--end::24-hour Time Picker Input-->
Localization
Set the calendar locale using
data-kt-date-picker-locale
.
Supports any valid locale string like
de-AT
(German-Austria),
fr-FR
(French),
es-ES
(Spanish), etc.
<!--begin::Localized Input (German-Austria)-->
<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-locale="de-AT" data-kt-date-picker-position-to-input="left" id="locale-input" placeholder="Datum wählen" readonly="" type="text"/>
</div>
<!--end::Localized Input-->
Month Picker
Display a month-only picker using
data-kt-date-picker-type="month"
.
Useful for selecting billing periods or monthly reports.
<!--begin::Month Picker Input-->
<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-type="month" id="month-picker-input" placeholder="Select month" readonly="" type="text"/>
</div>
<!--end::Month Picker Input-->
Year Picker
Display a year-only picker using
data-kt-date-picker-type="year"
.
Useful for selecting fiscal years or annual reports.
<!--begin::Year Picker Input-->
<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-type="year" id="year-picker-input" placeholder="Select year" readonly="" type="text"/>
</div>
<!--end::Year Picker Input-->
Preselected Month & Year
Set the initial month and year view using
data-kt-date-picker-selected-month
(0-11)
and
data-kt-date-picker-selected-year
.
<!--begin::Preselected Month/Year Input-->
<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-selected-month="0" data-kt-date-picker-selected-year="2025" id="preselected-input" placeholder="Select date (Jan 2025)" readonly="" type="text"/>
</div>
<!--end::Preselected Month/Year Input-->
First Day of Week
Set the first day of the week using
data-kt-date-picker-first-weekday
.
Values:
0
(Sunday) through
6
(Saturday).
Default is
0
(Sunday). Use
1
for Monday.
<!--begin::First Weekday Monday Input-->
<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-first-weekday="1" data-kt-date-picker-input-mode="true" data-kt-date-picker-position-to-input="left" id="first-weekday-input" placeholder="Select date (Mon first)" readonly="" type="text"/>
</div>
<!--end::First Weekday Monday Input-->
API Interaction
Interact with an initialized date picker instance programmatically using the
KTDatePicker
API.
Use
KTDatePicker.getInstance(element)
to get the instance, then call methods like
getSelectedDates()
,
show()
,
hide()
,
reset()
, and
getCalendar()
to access the underlying vanilla-calendar-pro instance.
Click a button to interact with the date picker
<!--begin::Date Picker with API Controls-->
<div class="flex flex-col gap-4 w-full max-w-sm">
<!--begin::Date Input-->
<div class="kt-input">
<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" id="api-date-picker" placeholder="Select a date" readonly="" type="text"/>
</div>
<!--end::Date Input-->
<!--begin::API Control Buttons-->
<div class="flex flex-wrap gap-2">
<button class="kt-btn kt-btn-sm kt-btn-outline" onclick="getSelectedDate()" type="button">
Get Date
</button>
<button class="kt-btn kt-btn-sm kt-btn-outline" onclick="setDate()" type="button">
Set Today
</button>
<button class="kt-btn kt-btn-sm kt-btn-outline" onclick="showCalendar()" type="button">
Show
</button>
<button class="kt-btn kt-btn-sm kt-btn-outline" onclick="resetCalendar()" type="button">
Reset
</button>
<button class="kt-btn kt-btn-sm kt-btn-outline" onclick="hideCalendar()" type="button">
Hide
</button>
</div>
<!--end::API Control Buttons-->
<!--begin::Output Display-->
<div class="p-3 bg-muted rounded-lg text-xs! font-mono text-muted-foreground min-h-[40px]" id="api-output">
Click a button to interact with the date picker
</div>
<!--end::Output Display-->
</div>
<!--end::Date Picker with API Controls-->
<script>
function getSelectedDate() {
const picker = KTDatePicker.getInstance(document.getElementById('api-date-picker'));
const dates = picker.getSelectedDates();
document.getElementById('api-output').textContent =
dates.length > 0 ? 'Selected: ' + dates.join(', ') : 'No date selected';
}
function setDate() {
const picker = KTDatePicker.getInstance(document.getElementById('api-date-picker'));
const calendar = picker.getCalendar();
const today = new Date().toISOString().split('T')[0];
// Update calendar with new selected date
calendar.update({
selectedDates: [today],
selectedMonth: new Date().getMonth(),
selectedYear: new Date().getFullYear()
});
// Update input value
document.getElementById('api-date-picker').value = today;
document.getElementById('api-output').textContent = 'Date set to: ' + today;
}
function showCalendar() {
const picker = KTDatePicker.getInstance(document.getElementById('api-date-picker'));
picker.show();
document.getElementById('api-output').textContent = 'Calendar shown';
}
function hideCalendar() {
const picker = KTDatePicker.getInstance(document.getElementById('api-date-picker'));
picker.hide();
document.getElementById('api-output').textContent = 'Calendar hidden';
}
function resetCalendar() {
const picker = KTDatePicker.getInstance(document.getElementById('api-date-picker'));
picker.reset();
document.getElementById('api-output').textContent = 'Calendar reset';
}
</script>
Date Picker in Modal
Use the date picker inside a modal dialog. The calendar dropdown will properly position itself
within the modal content area. Use
data-kt-date-picker-lazy="true"
to
initialize the picker when the modal opens for better performance.
<!--begin::Modal Trigger-->
<button class="kt-btn kt-btn-primary" data-kt-modal-toggle="#datepicker-modal">
Open Date Picker Modal
</button>
<!--end::Modal Trigger-->
<!--begin::Modal-->
<div class="kt-modal" data-kt-modal="true" id="datepicker-modal">
<div class="kt-modal-content max-w-[400px] top-[10%]">
<!--begin::Modal Header-->
<div class="kt-modal-header">
<h3 class="kt-modal-title">
Select Date
</h3>
<button aria-label="Close modal" class="kt-modal-close" data-kt-modal-dismiss="#datepicker-modal" type="button">
<i class="ki-outline ki-cross">
</i>
</button>
</div>
<!--end::Modal Header-->
<!--begin::Modal Body-->
<div class="kt-modal-body flex flex-col gap-4">
<!--begin::Single Date Input-->
<div class="flex flex-col gap-2">
<label class="text-sm font-medium text-foreground">
Select Date
</label>
<div class="kt-input">
<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" id="modal-date-picker" placeholder="Pick a date" readonly="" type="text"/>
</div>
</div>
<!--end::Single Date Input-->
<!--begin::Date Range Input-->
<div class="flex flex-col gap-2">
<label class="text-sm font-medium text-foreground">
Select Date Range
</label>
<div class="kt-input">
<i class="ki-outline ki-calendar">
</i>
<input class="grow" data-kt-date-picker="true" data-kt-date-picker-action-buttons="left" data-kt-date-picker-input-mode="true" data-kt-date-picker-position-to-input="center" data-kt-date-picker-selection-dates-mode="multiple-ranged" id="modal-range-picker" placeholder="Pick a date range" readonly="" type="text"/>
</div>
</div>
<!--end::Date Range Input-->
</div>
<!--end::Modal Body-->
<!--begin::Modal Footer-->
<div class="kt-modal-footer justify-end">
<button class="kt-btn kt-btn-outline" data-kt-modal-dismiss="#datepicker-modal" type="button">
Cancel
</button>
<button class="kt-btn kt-btn-primary" data-kt-modal-dismiss="#datepicker-modal" type="button">
Confirm
</button>
</div>
<!--end::Modal Footer-->
</div>
</div>
<!--end::Modal-->
