# Date Picker
A pure HTML and vanilla JS implementation of Zag JS Date Picker
A datepicker allows users to enter a date either through text input, or by choosing a date from the calendar.
# Anatomy
The Date Picker component consists of the following data parts:
control, input, trigger, positioner, content, view-control, prev-trigger, next-trigger, prev-trigger, , view-trigger, table, table-header, table-body
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 1 | 2 | 3 | 4 | 5 | 6 |
<div class="date-picker date-picker-js">
<div data-part="control">
<input data-part="input" />
<button data-part="trigger" aria-label="Date Picker">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<div data-part="content">
<div class="date-picker__day-view">
<div data-part="view-control" data-view="day">
<button data-part="prev-trigger" data-view="day">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="day"></button>
<button data-part="next-trigger" data-view="day">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="day">
<thead data-part="table-header" data-view="day"></thead>
<tbody data-part="table-body" data-view="day"></tbody>
</table>
</div>
<div class="date-picker__month-view">
<div data-part="view-control" data-view="month">
<button data-part="prev-trigger" data-view="month">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="month"></button>
<button data-part="next-trigger" data-view="month">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="month" data-columns="4">
<tbody data-part="table-body" data-view="month"></tbody>
</table>
</div>
<div class="date-picker__year-view">
<div data-part="view-control" data-view="year">
<button data-part="prev-trigger" data-view="year">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="year"></button>
<button data-part="next-trigger" data-view="year">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="year" data-columns="4">
<tbody data-part="table-body" data-view="year"></tbody>
</table>
</div>
</div>
</div>
</div>
# Data attributes
Each date-picker can be set with different settings with the following data-attribute.
| Jan | Feb | Mar | Apr | May |
| Jun | Jul | Aug | Sep | Oct |
| Nov | Dec |
<div
class="date-picker date-picker-js"
data-columns="5"
data-no-weekend="true"
data-close-on-select="false"
data-default-value="2025-06-10"
data-default-focused-value="2025-06-12"
data-format="medium"
data-default-view="month"
data-fixed-weeks="true"
>
<div data-part="control">
<input data-part="input" />
<button data-part="trigger" aria-label="Date Picker">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<div data-part="content">
<div class="date-picker__day-view">
<div data-part="view-control" data-view="day">
<button data-part="prev-trigger" data-view="day">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="day"></button>
<button data-part="next-trigger" data-view="day">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="day">
<thead data-part="table-header" data-view="day"></thead>
<tbody data-part="table-body" data-view="day"></tbody>
</table>
</div>
<div class="date-picker__month-view">
<div data-part="view-control" data-view="month">
<button data-part="prev-trigger" data-view="month">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="month"></button>
<button data-part="next-trigger" data-view="month">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="month" data-columns="4">
<tbody data-part="table-body" data-view="month"></tbody>
</table>
</div>
<div class="date-picker__year-view">
<div data-part="view-control" data-view="year">
<button data-part="prev-trigger" data-view="year">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="year"></button>
<button data-part="next-trigger" data-view="year">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="year" data-columns="4">
<tbody data-part="table-body" data-view="year"></tbody>
</table>
</div>
</div>
</div>
</div>
id
Type: string
Description: The unique id of the component. Default generated if none is provided.
data-locale
Type: string
Description: The locale (BCP 47 language tag) to use when formatting the date. Default "en-US".
data-dir
Type: ltr | rtl
Description: The orientation of the checkbox. Can be ltr or rtl.
data-default-open
Type: boolean
Description: The initial open state of the date picker when rendered. Use when you don't need to control the open state of the date picker.
data-close-on-select
Type: boolean
Description: Whether the calendar should close after the date selection is complete. This is ignored when the selection mode is multiple.
data-placeholder
Type: string
Description: The placeholder text to display in the input.
data-selection-mode
Type: "single" || "multiple" || "range"
Description: The selection mode of the calendar.
single- only one date can be selectedmultiple- multiple dates can be selectedrange- a range of dates can be selected
data-default-value
Type: string || string list
Description: The initial selected date(s) when rendered. Use when you don't need to control the selected date(s) of the date picker.
data-default-view
Type: "day" || "month" || "year"
Description: The default view of the calendar.
data-min-view
Type: "day" || "month" || "year"
Description: The minimum view of the calendar.
data-max-view
Type: "day" || "month" || "year"
Description: The maximum view of the calendar.
data-disabled
Type: boolean
Description: Whether the calendar is disabled.
data-fixed-weeks
Type: boolean
Description: Whether the calendar should have a fixed number of weeks. This renders the calendar with 6 weeks instead of 5 or 6.
data-focused-value
Type: string
Description: The controlled focused date.
data-format
Type: "short" || "medium" || "long" || "full"
Description: The format of the date to display in the input.
data-min
Type: string || "today"
Description: The minimum date that can be selected.
data-max
Type: string || "today"
Description: The maximum date that can be selected.
data-name
Type: string
Description: The name attribute of the input element.
data-num-of-months
Type: number
Description: The number of months to display.
data-outside-day-selectable
Type: boolean
Description: Whether day outside the visible range can be selected.
data-read-only
Type: boolean
Description: Whether the calendar is read only.
data-start-of-week
Type: number
Description: The first day of the week.
0 - Sunday
1 - Monday
2 - Tuesday
3 - Wednesday
4 - Thursday
5 - Friday
6 - Saturday
data-time-zone
Type: string
Description: The Time zone to use. Default to "UTC".
data-no-weekend
Type: boolean
Description: Make weekend dates not available.
# Event Callbacks
Each Date Picker component can receive callbacks that can be used to respond to user interaction with custom behavior.
You must add a custom id for the date-picker and a event listener for your event name
document
.getElementById("my-date-picker")
?.addEventListener("my-date-picker-event", (event) => {
console.log("Received event:", (event as CustomEvent).detail);
});
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 1 | 2 | 3 | 4 | 5 | 6 |
<div
id="my-date-picker"
class="date-picker date-picker-js"
data-on-value-change="my-date-picker-event"
>
<div data-part="control">
<input data-part="input" />
<button data-part="trigger" aria-label="Date Picker">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<div data-part="content">
<div class="date-picker__day-view">
<div data-part="view-control" data-view="day">
<button data-part="prev-trigger" data-view="day">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="day"></button>
<button data-part="next-trigger" data-view="day">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="day">
<thead data-part="table-header" data-view="day"></thead>
<tbody data-part="table-body" data-view="day"></tbody>
</table>
</div>
<div class="date-picker__month-view">
<div data-part="view-control" data-view="month">
<button data-part="prev-trigger" data-view="month">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="month"></button>
<button data-part="next-trigger" data-view="month">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="month" data-columns="4">
<tbody data-part="table-body" data-view="month"></tbody>
</table>
</div>
<div class="date-picker__year-view">
<div data-part="view-control" data-view="year">
<button data-part="prev-trigger" data-view="year">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="year"></button>
<button data-part="next-trigger" data-view="year">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="year" data-columns="4">
<tbody data-part="table-body" data-view="year"></tbody>
</table>
</div>
</div>
</div>
</div>
Open your browser's console to see the events received when a date is selected
data-on-value-change
Type: string
Description: Event name to be sent when the value changes.
data-on-focus-change
Type: string
Description: Event name to be sent when the focused date changes.
data-on-open-change
Type: string
Description: Event name to be sent when the calendar is opened or closed.
data-on-view-change
Type: string
Description: Event name to be sent when the view changes.
# Locale
You can select locale to be displayed
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 1 | 2 | 3 | 4 | 5 | 6 |
| س | ح | ن | ث | ر | خ | ج |
|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 |
<div
class="date-picker date-picker-js"
data-locale="ja"
data-open="true"
data-fixed-weeks="true"
data-inline="true"
data-close-on-select="false"
>
<div data-part="content">
<div class="date-picker__day-view">
<div data-part="view-control" data-view="day">
<button data-part="prev-trigger" data-view="day">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="day"></button>
<button data-part="next-trigger" data-view="day">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="day">
<thead data-part="table-header" data-view="day"></thead>
<tbody data-part="table-body" data-view="day"></tbody>
</table>
</div>
<div class="date-picker__month-view">
<div data-part="view-control" data-view="month">
<button data-part="prev-trigger" data-view="month">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="month"></button>
<button data-part="next-trigger" data-view="month">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="month" data-columns="4">
<tbody data-part="table-body" data-view="month"></tbody>
</table>
</div>
<div class="date-picker__year-view">
<div data-part="view-control" data-view="year">
<button data-part="prev-trigger" data-view="year">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="year"></button>
<button data-part="next-trigger" data-view="year">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="year" data-columns="4">
<tbody data-part="table-body" data-view="year"></tbody>
</table>
</div>
</div>
</div>
<div
class="date-picker date-picker-js"
data-locale="ar"
data-fixed-weeks="true"
dir="rtl"
data-open="true"
data-inline="true"
data-close-on-select="false"
>
<div data-part="content">
<div class="date-picker__day-view">
<div data-part="view-control" data-view="day">
<button data-part="prev-trigger" data-view="day">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="day"></button>
<button data-part="next-trigger" data-view="day">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="day">
<thead data-part="table-header" data-view="day"></thead>
<tbody data-part="table-body" data-view="day"></tbody>
</table>
</div>
<div class="date-picker__month-view">
<div data-part="view-control" data-view="month">
<button data-part="prev-trigger" data-view="month">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="month"></button>
<button data-part="next-trigger" data-view="month">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="month" data-columns="4">
<tbody data-part="table-body" data-view="month"></tbody>
</table>
</div>
<div class="date-picker__year-view">
<div data-part="view-control" data-view="year">
<button data-part="prev-trigger" data-view="year">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="year"></button>
<button data-part="next-trigger" data-view="year">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="year" data-columns="4">
<tbody data-part="table-body" data-view="year"></tbody>
</table>
</div>
</div>
</div>
# Date Range
You can select a range date to be displayed. You must add a second input
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 1 | 2 | 3 | 4 | 5 | 6 |
<div class="date-picker date-picker-js" data-selection-mode="range">
<div data-part="control">
<input data-part="input" data-index="0" placeholder="departure date" />
<input data-part="input" data-index="1" placeholder="return date" />
<button data-part="trigger" aria-label="Date Picker">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<div data-part="content">
<div class="date-picker__day-view">
<div data-part="view-control" data-view="day">
<button data-part="prev-trigger" data-view="day">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="day"></button>
<button data-part="next-trigger" data-view="day">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="day">
<thead data-part="table-header" data-view="day"></thead>
<tbody data-part="table-body" data-view="day"></tbody>
</table>
</div>
<div class="date-picker__month-view">
<div data-part="view-control" data-view="month">
<button data-part="prev-trigger" data-view="month">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="month"></button>
<button data-part="next-trigger" data-view="month">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="month" data-columns="4">
<tbody data-part="table-body" data-view="month"></tbody>
</table>
</div>
<div class="date-picker__year-view">
<div data-part="view-control" data-view="year">
<button data-part="prev-trigger" data-view="year">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="year"></button>
<button data-part="next-trigger" data-view="year">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="year" data-columns="4">
<tbody data-part="table-body" data-view="year"></tbody>
</table>
</div>
</div>
</div>
</div>
# Form usage
Date Picker can be used inside a form
You must set the name of the field data-name="date-picker-name"
<form
id="my-form-birth"
class="flex flex-col items-center gap-(--spacing-ui-gap)"
>
<div
class="date-picker date-picker-js"
data-form="my-form-birth"
data-name="date-of-birth"
data-fixed-weeks="true"
>
<div data-part="control">
<input data-part="input" />
<button data-part="trigger" aria-label="Date Picker">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<div data-part="content">
<div class="date-picker__day-view">
<div data-part="view-control" data-view="day">
<button data-part="prev-trigger" data-view="day">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="day"></button>
<button data-part="next-trigger" data-view="day">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="day">
<thead data-part="table-header" data-view="day"></thead>
<tbody data-part="table-body" data-view="day"></tbody>
</table>
</div>
<div class="date-picker__month-view">
<div data-part="view-control" data-view="month">
<button data-part="prev-trigger" data-view="month">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="month"></button>
<button data-part="next-trigger" data-view="month">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="month" data-columns="4">
<tbody data-part="table-body" data-view="month"></tbody>
</table>
</div>
<div class="date-picker__year-view">
<div data-part="view-control" data-view="year">
<button data-part="prev-trigger" data-view="year">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"
></path>
</svg>
</button>
<button data-part="view-trigger" data-view="year"></button>
<button data-part="next-trigger" data-view="year">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m8.25 4.5 7.5 7.5-7.5 7.5"
></path>
</svg>
</button>
</div>
<table data-part="table" data-view="year" data-columns="4">
<tbody data-part="table-body" data-view="year"></tbody>
</table>
</div>
</div>
</div>
</div>
<button class="button button--accent" type="submit">Submit</button>
</form>
<div id="result"></div>
You can use the results from the form as you wish
const formBirth = document.getElementById(
"my-form-birth",
) as HTMLFormElement | null;
const resultBirth = document.getElementById("result") as HTMLDivElement | null;
if (formBirth && resultBirth) {
formBirth.addEventListener("submit", (e: Event) => {
e.preventDefault();
const formData = new FormData(formBirth);
const dateOfBirth = formData.get("date-of-birth") as string;
resultBirth.textContent = `Submitted: birth day: ${dateOfBirth}`;
});
}
# Installation
First, complete the Corex UI initial installation guide for your platform, bundler, or framework.
- Import the component
import "@corex-ui/static/components/date-picker";
This will automatically initialize all elements with class="date-picker-js" and add the necessary interaction behavior.
- Add styling
The component is unstyled by default for maximum customization flexibility.
To apply the default Corex UI design system styles, import the stylesheet:
@import "@corex-ui/design/components/date-picker.css";
These styles will be applied to all elements with the date-picker class.