A flexible, accessible, and responsive datepicker component built with Tailwind CSS and JavaScript. It has a range of features such as multiple months, time selection, and date range selection. It also has a simple and intuitive API that allows you to customize the behavior and appearance of the datepicker.
The basic datepicker allows the user to select a date from a calendar. It is rendered as an input field with a dropdown arrow that can be clicked to show the calendar.
The visible months example shows how to display a datepicker calendar with multiple months. This can be useful when you want to allow users to select a date from a larger date range.
The range datepicker example demonstrates how to display a datepicker with date range enabled. This can be useful when you want to allow users to select a date range from a larger date range.
The minimum and maximum datepicker example demonstrates how to set a specific date range for the datepicker component. This is useful when you want to limit the date range that users can select from.
The datepicker with time selector example demonstrates how to use the datepicker component with an additional time selector. This component is useful when you want to allow users to select a specific date and time.
The datepicker provides a way to configure the component to use a specific locale. By default, the datepicker will use the en-US locale. You can use one of the built-in locales by passing the locale code to the locale option.
You can navigate the date using the arrow keys. Click on the date input, use the up and down arrow keys to change the date, and use the right and left arrow keys to change the segment date.
Segmented input provides a clearer visual separation between day, month, and year parts, making it easier for users to edit individual date components.
Segmented range combines the segmented input interface with date range selection, offering a more structured way to select date ranges.
For range selection, you can use separate inputs for start and end dates instead of a single input field, providing a clearer interface for users.
You can customize the time format to show 24-hour format, minutes only, or other variations to suit your requirements.
The datepicker supports various date formats that can be customized to match your application's requirements or regional preferences.
The datepicker component supports right-to-left (RTL) languages like Arabic, Hebrew, and Persian with proper text alignment and calendar orientation.
Combine time selection with date range selection for scenarios where you need to select time periods spanning across different days.
Customize the first day of the week in the calendar view to match the cultural preference (Sunday, Monday, etc.).
| Option | Type | Default | Description |
|---|---|---|---|
data-kt-datepicker-visible-months | number | 2 | Number of visible months in the calendar. |
data-kt-datepicker-locale | string | "en-US" | The locale to use for formatting dates. Check out the MDN documentation for all the possible values. |
data-kt-datepicker-week-days | enum | "min" | The length of the weekday names. Can be "short", "long", or "min". |
data-kt-datepicker-force-leading-zero | boolean | true | Force the leading zero to be displayed for single digit days and months. |
data-kt-datepicker-min-date | string | Date | undefined |
data-kt-datepicker-max-date | string | Date | undefined |
data-kt-datepicker-visible-months | number | 1 | The number of months to display in the calendar. |
data-kt-datepicker-visible-years | number | 10 | The number of years to display in the year selection. |
data-kt-datepicker-format | string | "dd/MM/yyyy" | The format of the date to be displayed. Check out the day.js documentation for all the possible values. |
data-kt-datepicker-enable-time | boolean | false | Enables the time picker. |
data-kt-datepicker-time-format | string | "hh:mm:ss A ZZZ" | The format of the time to be displayed. Check out the day.js documentation for all the possible values. |
data-kt-datepicker-am | string | "AM" | The string to display for AM. |
data-kt-datepicker-pm | string | "PM" | The string to display for PM. |
data-kt-datepicker-hour-step | number | 1 | The step for the hours selection. |
data-kt-datepicker-minute-step | number | 5 | The step for the minutes selection. |
data-kt-datepicker-second-step | number | 10 | The step for the seconds selection. |
data-kt-datepicker-disabled-hours | number[] | [0, 1, 2, 3, 4, 5, 6, 22, 23] | The hours to disable in the time picker. |
data-kt-datepicker-disabled-minutes | number[] | [0, 1, 2, 3] | The minutes to disable in the time picker. |
data-kt-datepicker-range | boolean | false | Enables date range selection. |
data-kt-datepicker-segmented-input | boolean | false | Enables segmented date input display. |
data-kt-datepicker-multi-date | boolean | false | Enables selection of multiple non-consecutive dates. |
data-kt-datepicker-max-dates | number | 10 | Maximum number of dates that can be selected in multi-date mode. |
data-kt-datepicker-first-day-of-week | number | 0 | First day of week (0 for Sunday, 1 for Monday, etc). |
This table details the custom classes and data options used by the datepicker component.
| Name | Description |
|---|---|
data-kt-datepicker | A selector used to auto-initialize the datepicker object on page load. |
data-kt-datepicker-input | Link the datepicker to a specific input field. |
data-kt-datepicker-start | Specify the start date value for the date range picker. |
data-kt-datepicker-end | Specify the end date value for the date range picker. |
data-kt-datepicker-segment | Identify the root element of the datepicker component. |
data-kt-datepicker-month-container | Identify the container element that wraps the month display elements. |
data-kt-datepicker-month-display | Identify the element that displays the name of the current month. |
data-kt-datepicker-year-display | Identify the element that displays the current year. |
data-kt-datepicker-days-of-week | Identify the element that displays the names of the days of the week. |
data-kt-datepicker-grid | Identify the element that contains the calendar grid. |
data-kt-datepicker-prev-btn | Identify the previous month button element. |
data-kt-datepicker-next-btn | Identify the next month button element. |
data-kt-datepicker-month-year-display | Identify the element that displays the current month and year. |
data-kt-datepicker-cell | Identify the element that displays the date cell. |
data-kt-datepicker-month-year-selector | Identify the element that displays the month and year select dropdown. |
data-kt-datepicker-month-option | Identify the element that displays the month select option. |
data-kt-datepicker-year-option | Identify the element that displays the year select option. |
data-kt-datepicker-time-input | Identify the element that displays the time input. |
data-kt-datepicker-month-options | Identify the element that displays the month select options. |
data-kt-datepicker-year-options | Identify the element that displays the year select options. |
| Class | Description |
|---|---|
active | Sets a specific datepicker item to be open initially when used togather with data-kt-datepicker-item selector. |
hidden | Sets a specific datepicker content to be hidden initially when used togather with data-kt-datepicker-item selector. |
KTDatePicker custom events allows you to register callback functions(event listeners)
that will be invoked automatically whenever specific custom events are triggered within the component.
| Event | Description |
|---|---|
init | Triggered when the datepicker is initialized. |
date-change | Triggered when the selected date changes. |
keyboard-navigate | Triggered when the user navigates the datepicker using the keyboard. |
rendered | Triggered when the datepicker is rendered. |
previous-month | Triggered when the user navigates to the previous month. |
next-month | Triggered when the user navigates to the next month. |