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.
This preview uses a long form: dddd, DD MMMM YYYY (for example Tuesday, 03 December 2024).
Other common formats: DD/MM/YYYY, MM/DD/YYYY,
YYYY-MM-DD, DD MMM YYYY.
Supported tokens: YYYY, YY,
MM, DD,
MMMM (full month), MMM (short month),
dddd (full weekday), ddd (short weekday).
<!--begin::Custom Format Input (long form: weekday + full month)-->
<div class="kt-input w-full max-w-md min-w-[18rem]">
<i class="ki-outline ki-calendar">
</i>
<input class="grow" data-kt-date-picker="true" data-kt-date-picker-date-format="dddd, DD MMMM 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="Tuesday, 03 December 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-->
Presets
Enable quick date selection with preset options. Use
data-kt-date-picker-presets="true" to show the built-in presets panel.
By default only Today and Yesterday are enabled. Enable or disable each preset with
data-kt-date-picker-preset-today, data-kt-date-picker-preset-yesterday,
data-kt-date-picker-preset-this-week, data-kt-date-picker-preset-last7-days, etc.
Set to "true" to enable or "false" to disable. Presets work with both single-date and date-range pickers.
<!--begin::Single date with presets-->
<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-format="dd MMM yyyy" data-kt-date-picker-input-mode="true" data-kt-date-picker-position-to-input="left" data-kt-date-picker-presets="true" id="presets-single-date-picker" placeholder="Select date" readonly="" type="text"/>
</div>
<!--end::Single date with presets-->
<!--begin::Date range with presets (extra presets enabled via data attributes)-->
<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-preset-last-month="true" data-kt-date-picker-preset-last30-days="true" data-kt-date-picker-preset-last7-days="true" data-kt-date-picker-preset-this-month="true" data-kt-date-picker-preset-this-week="true" data-kt-date-picker-presets="true" data-kt-date-picker-selection-dates-mode="multiple-ranged" data-kt-date-picker-type="multiple" id="presets-range-date-picker" placeholder="Select date range" readonly="" type="text"/>
</div>
<!--end::Date range with presets-->
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.
To change locale after init, sync data-kt-date-picker-locale if you persist config, then call calendar.set({ locale }) on KTDatePicker.getInstance(element).getCalendar(), as in the preview buttons.
<div class="flex flex-col gap-4 w-full max-w-md">
<!--begin::Locale toggle-->
<div aria-label="Calendar locale" class="flex flex-wrap gap-2 justify-center" role="group">
<button aria-pressed="false" class="kt-btn kt-btn-sm kt-btn-outline" data-locale-code="en-US" data-locale-picker-btn="" onclick="applyLocalePickerDemo('en-US', this)" type="button">
EN
</button>
<button aria-pressed="true" class="kt-btn kt-btn-sm kt-btn-primary" data-locale-code="de-AT" data-locale-picker-btn="" onclick="applyLocalePickerDemo('de-AT', this)" type="button">
DE
</button>
<button aria-pressed="false" class="kt-btn kt-btn-sm kt-btn-outline" data-locale-code="fr-FR" data-locale-picker-btn="" onclick="applyLocalePickerDemo('fr-FR', this)" type="button">
FR
</button>
<button aria-pressed="false" class="kt-btn kt-btn-sm kt-btn-outline" data-locale-code="es-ES" data-locale-picker-btn="" onclick="applyLocalePickerDemo('es-ES', this)" type="button">
ES
</button>
</div>
<!--end::Locale toggle-->
<!--begin::Localized Input (default: German-Austria)-->
<div class="kt-input w-full max-w-sm mx-auto">
<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-locale="de-AT" 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="locale-input" placeholder="Datumsbereich wählen" readonly="" type="text"/>
</div>
<!--end::Localized Input-->
</div>
<script>
function applyLocalePickerDemo(localeCode, btn) {
const input = document.getElementById('locale-input');
const picker = KTDatePicker.getInstance(input);
const placeholders = {
'en-US': 'Select date range',
'de-AT': 'Datumsbereich wählen',
'fr-FR': 'Choisir une plage de dates',
'es-ES': 'Seleccionar rango de fechas',
};
document.querySelectorAll('[data-locale-picker-btn]').forEach(function (el) {
el.classList.remove('kt-btn-primary');
el.classList.add('kt-btn-outline');
el.setAttribute('aria-pressed', 'false');
});
btn.classList.remove('kt-btn-outline');
btn.classList.add('kt-btn-primary');
btn.setAttribute('aria-pressed', 'true');
input.placeholder = placeholders[localeCode] || placeholders['en-US'];
if (localeCode === 'en-US') {
input.removeAttribute('data-kt-date-picker-locale');
} else {
input.setAttribute('data-kt-date-picker-locale', localeCode);
}
const calendar = picker && picker.getCalendar();
if (calendar && typeof calendar.set === 'function') {
calendar.set({ locale: localeCode });
if (typeof calendar.update === 'function') {
calendar.update({ locale: true });
}
}
}
</script>
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-->
