Date Picker

Examples

Basic

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.

<div data-kt-datepicker="true">
  <input
    data-kt-datepicker-input="true"
    placeholder="Select a date"
    class="kt-input"
  />
</div>

Visible months

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.

<div data-kt-datepicker="true" data-kt-datepicker-visible-months="2">
  <input
    data-kt-datepicker-input="true"
    placeholder="Select a date"
    class="w-full border rounded p-2"
  />
</div>

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.

<div
  data-kt-datepicker="true"
  data-kt-datepicker-range="true"
  data-kt-datepicker-visible-months="2"
>
  <input
    data-kt-datepicker-input="true"
    placeholder="Select date range"
    class="w-full border rounded p-2"
  />
</div>

Min/max date

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.

<div
  data-kt-datepicker="true"
  data-kt-datepicker-min-date="01/05/2024"
  data-kt-datepicker-max-date="31/07/2024"
>
  <input
    data-kt-datepicker-input="true"
    placeholder="Select date (May to July 2024)"
    class="w-full border rounded p-2"
  />
</div>

Time selector

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.

<div data-kt-datepicker="true" data-kt-datepicker-enable-time="true">
  <input
    data-kt-datepicker-input="true"
    placeholder="Select date and time"
    class="w-full border rounded p-2"
  />
</div>

Locale

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.

<div
  data-kt-datepicker="true"
  data-kt-datepicker-locale="fr"
  data-kt-datepicker-format="dd/MM/yyyy"
>
  <input
    data-kt-datepicker-input="true"
    placeholder="Sélectionner une date"
    class="w-full border rounded p-2"
  />
</div>

Keyboard navigation

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.

<div data-kt-datepicker="true" data-kt-datepicker-segmented-input="true">
  <input
    data-kt-datepicker-input="true"
    placeholder="Select a date"
    class="w-full border rounded p-2"
  />
</div>

Segmented input

Segmented input provides a clearer visual separation between day, month, and year parts, making it easier for users to edit individual date components.

<div data-kt-datepicker="true" data-kt-datepicker-segmented-input="true">
  <input
    data-kt-datepicker-input="true"
    placeholder="Select date"
    class="w-full border rounded p-2"
  />
</div>

Segmented range

Segmented range combines the segmented input interface with date range selection, offering a more structured way to select date ranges.

<div
  data-kt-datepicker="true"
  data-kt-datepicker-range="true"
  data-kt-datepicker-segmented-input="true"
>
  <input
    data-kt-datepicker-input="true"
    placeholder="Select date range"
    class="w-full border rounded p-2"
  />
</div>

Separate inputs

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.

<div
  data-kt-datepicker="true"
  data-kt-datepicker-range="true"
  data-kt-datepicker-visible-months="2"
>
  <div class="flex space-x-4">
    <input
      data-kt-datepicker-start="true"
      placeholder="Start date"
      class="w-full border rounded p-2"
    /><input
      data-kt-datepicker-end="true"
      placeholder="End date"
      class="w-full border rounded p-2"
    />
  </div>
</div>

Custom time format

You can customize the time format to show 24-hour format, minutes only, or other variations to suit your requirements.

<div
  data-kt-datepicker="true"
  data-kt-datepicker-enable-time="true"
  data-kt-datepicker-time-format="HH:mm"
  data-kt-datepicker-format="yyyy-MM-dd HH:mm"
>
  <input
    data-kt-datepicker-input="true"
    placeholder="Select date and time (24h format)"
    class="w-full border rounded p-2"
  />
</div>

Custom date format

The datepicker supports various date formats that can be customized to match your application's requirements or regional preferences.

<div data-kt-datepicker="true" data-kt-datepicker-format="yyyy-MM-dd">
  <input
    data-kt-datepicker-input="true"
    placeholder="Select date (YYYY-MM-DD)"
    class="w-full border rounded p-2"
  />
</div>

RTL support

The datepicker component supports right-to-left (RTL) languages like Arabic, Hebrew, and Persian with proper text alignment and calendar orientation.

<div data-kt-datepicker="true" data-kt-datepicker-locale="ar" dir="rtl">
  <input
    data-kt-datepicker-input="true"
    placeholder="اختر تاريخ"
    class="w-full border rounded p-2 text-right"
  />
</div>

Time range selection

Combine time selection with date range selection for scenarios where you need to select time periods spanning across different days.

<div
  data-kt-datepicker="true"
  data-kt-datepicker-range="true"
  data-kt-datepicker-enable-time="true"
  data-kt-datepicker-visible-months="2"
>
  <input
    data-kt-datepicker-input="true"
    placeholder="Select date and time range"
    class="w-full border rounded p-2"
  />
</div>

First day of week

Customize the first day of the week in the calendar view to match the cultural preference (Sunday, Monday, etc.).

<div data-kt-datepicker="true" data-kt-datepicker-first-day-of-week="1">
  <input
    data-kt-datepicker-input="true"
    placeholder="Select date (week starts on Monday)"
    class="w-full border rounded p-2"
  />
</div>

Component API

Options

| 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 | The minimum date that can be selected. Can be a string in the format specified in the dateFormat option. | | data-kt-datepicker-max-date | string | Date | undefined | The maximum date that can be selected. Can be a string in the format specified in the dateFormat option. | | 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). |

Selectors

This table details the custom classes and data options used by the datepicker component.

Classes

Event

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.