0.0.3

Date Picker

A pure vanilla JS implementation of Zag JS Date Picker Opens in a new window


Anatomy

The Date Picker component consists of the following views

day month year
<div class="date-picker date-picker-js">
                  <div data-part="control">
                  <input data-part="input">
                  <button data-part="trigger" class="button button--square" aria-label="Button text">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button__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 class="button button--sm button--square" data-part="prev-trigger" data-view="day">
                  <svg class="button__icon" 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" class="button button--sm">
                  </button>
                  <button class="button button--sm button--square" data-part="next-trigger" data-view="day">
                  <svg class="button__icon" 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 class="button button--sm button--square" data-part="prev-trigger" data-view="month">
                  <svg class="button__icon" 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" class="button button--sm">
                  </button>
                  <button class="button button--sm button--square" data-part="next-trigger" data-view="month">
                  <svg class="button__icon" 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 class="button button--sm button--square" data-part="prev-trigger" data-view="year">
                  <svg class="button__icon" 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" class="button button--sm">
                  </button>
                  <button class="button button--sm button--square" data-part="next-trigger" data-view="year">
                  <svg class="button__icon" 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.

<div class="date-picker date-picker-js" 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" class="button button--square" aria-label="Button text">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button__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 class="button button--sm button--square" data-part="prev-trigger" data-view="day">
                  <svg class="button__icon" 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" class="button button--sm">
                  </button>
                  <button class="button button--sm button--square" data-part="next-trigger" data-view="day">
                  <svg class="button__icon" 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 class="button button--sm button--square" data-part="prev-trigger" data-view="month">
                  <svg class="button__icon" 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" class="button button--sm">
                  </button>
                  <button class="button button--sm button--square" data-part="next-trigger" data-view="month">
                  <svg class="button__icon" 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 class="button button--sm button--square" data-part="prev-trigger" data-view="year">
                  <svg class="button__icon" 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" class="button button--sm">
                  </button>
                  <button class="button button--sm button--square" data-part="next-trigger" data-view="year">
                  <svg class="button__icon" 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 attribute Type / Options Description
id string The unique id of the component. Default generated if none is provided
data-locale string The locale (BCP 47 language tag) to use when formatting the date. Default "en-US"
data-dir ltr | rtl The orientation of the checkbox. Can be `ltr` or `rtl`
data-default-open boolean 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 boolean Whether the calendar should close after the date selection is complete. This is ignored when the selection mode is multiple.
data-placeholder string The placeholder text to display in the input.
data-selection-mode "single" || "multiple" || "range" The selection mode of the calendar. single - only one date can be selected multiple - multiple dates can be selected range - a range of dates can be selected
data-default-value string || string list 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 "day"|| "month" || "year" The default view of the calendar
data-min-view "day"|| "month" || "year" The min view of the calendar
data-max-view "day"|| "month" || "year" The max view of the calendar
data-disabled boolean Whether the calendar is disabled.
data-fixed-weeks boolean 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 string The controlled focused date.
data-format "short"|| "medium" || "long" || "full" The format of the date to display in the input.
data-min string || "today" The minimum date that can be selected.
data-max string || "today" The maximum date that can be selected
data-name string The name attribute of the input element.
data-num-of-months number The number of months to display.
data-outside-day-selectable boolean Whether day outside the visible range can be selected.
data-read-only boolean Whether the calendar is read only.
data-start-of-week number The first day of the week. 0 - Sunday 1 - Monday 2 - Tuesday 3 - Wednesday 4 - Thursday 5 - Friday 6 - Saturday
data-time-zone string The Time zone to use. Default to "UTC"
data-no-weekend boolean Make weekends dates not available

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-callback-date-picker")
                      ?.addEventListener("my-callback-date-picker-event", (event) => {
                        console.log("Received event:", (event as CustomEvent).detail);
                      });
                  
<div id="my-callback-date-picker" class="date-picker date-picker-js" data-on-value-change="my-callback-date-picker-event">
                  <div data-part="control">
                  <input data-part="input">
                  <button data-part="trigger" class="button button--square" aria-label="Button text">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button__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 class="button button--sm button--square" data-part="prev-trigger" data-view="day">
                  <svg class="button__icon" 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" class="button button--sm">
                  </button>
                  <button class="button button--sm button--square" data-part="next-trigger" data-view="day">
                  <svg class="button__icon" 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 class="button button--sm button--square" data-part="prev-trigger" data-view="month">
                  <svg class="button__icon" 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" class="button button--sm">
                  </button>
                  <button class="button button--sm button--square" data-part="next-trigger" data-view="month">
                  <svg class="button__icon" 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 class="button button--sm button--square" data-part="prev-trigger" data-view="year">
                  <svg class="button__icon" 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" class="button button--sm">
                  </button>
                  <button class="button button--sm button--square" data-part="next-trigger" data-view="year">
                  <svg class="button__icon" 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 attribute Type / Options Description
data-on-value-change string Event name to be send when the value changes
data-on-focus-change string Event name to be send when the focused date changes
data-on-open-change string Event name to be send when the calendar is opened or closed
data-on-view-change string Event name to be send when the view changes

Locale

You can select locale to be displayed

<div class="date-picker date-picker-js" data-locale="ja" data-open="true" data-fixed-weeks="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 class="button button--sm button--square" data-part="prev-trigger" data-view="day">
                  <svg class="button__icon" 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" class="button button--sm">
                  </button>
                  <button class="button button--sm button--square" data-part="next-trigger" data-view="day">
                  <svg class="button__icon" 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 class="button button--sm button--square" data-part="prev-trigger" data-view="month">
                  <svg class="button__icon" 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" class="button button--sm">
                  </button>
                  <button class="button button--sm button--square" data-part="next-trigger" data-view="month">
                  <svg class="button__icon" 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 class="button button--sm button--square" data-part="prev-trigger" data-view="year">
                  <svg class="button__icon" 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" class="button button--sm">
                  </button>
                  <button class="button button--sm button--square" data-part="next-trigger" data-view="year">
                  <svg class="button__icon" 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-close-on-select="false">
                  <div data-part="content">
                  <div class="date-picker__day-view">
                  <div data-part="view-control" data-view="day">
                  <button class="button button--sm button--square" data-part="prev-trigger" data-view="day">
                  <svg class="button__icon" 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" class="button button--sm">
                  </button>
                  <button class="button button--sm button--square" data-part="next-trigger" data-view="day">
                  <svg class="button__icon" 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 class="button button--sm button--square" data-part="prev-trigger" data-view="month">
                  <svg class="button__icon" 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" class="button button--sm">
                  </button>
                  <button class="button button--sm button--square" data-part="next-trigger" data-view="month">
                  <svg class="button__icon" 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 class="button button--sm button--square" data-part="prev-trigger" data-view="year">
                  <svg class="button__icon" 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" class="button button--sm">
                  </button>
                  <button class="button button--sm button--square" data-part="next-trigger" data-view="year">
                  <svg class="button__icon" 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>

Use with Form

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">
                  <div class="checkbox checkbox-js" data-form="my-form" data-name="newsletter" data-value="yes">
                  <label data-part="root">
                  <span data-part="label">Receive Newsletter ?</span>
                  <input data-part="hidden-input">
                  <div data-part="control">
                  <svg class="control__checked" 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="m4.5 12.75 6 6 9-13.5"></path>
                  </svg>
                  <svg class="control__indeterminate" 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="M5 12h14"></path>
                  </svg>
                  </div>
                  </label>
                  </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}`;
                    });
                  }
              

Custom (Tailwind)

If you are using Tailwind styling, you can customize each date-picker and its parts with Tailwind utilities

<div class="date-picker date-picker-js">
                  <div data-part="control">
                  <input data-part="input" class="rounded-full border-contrast-brand text-contrast-brand">
                  <button data-part="trigger" class="button rounded-full border-contrast-brand text-contrast-brand" aria-label="Button text">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button__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 class="button button--sm button--square rounded-full border-contrast-brand text-contrast-brand" data-part="prev-trigger" data-view="day">
                  <svg class="button__icon" 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" class="button button--sm rounded-full border-contrast-brand text-contrast-brand">
                  </button>
                  <button class="button button--sm button--square rounded-full border-contrast-brand text-contrast-brand" data-part="next-trigger" data-view="day">
                  <svg class="button__icon" 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" class="text-contrast-brand">
                  </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 class="button button--sm button--square rounded-full border-contrast-brand text-contrast-brand" data-part="prev-trigger" data-view="month">
                  <svg class="button__icon" 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" class="button button--sm rounded-full border-contrast-brand text-contrast-brand">
                  </button>
                  <button class="button button--sm button--square rounded-full border-contrast-brand text-contrast-brand" data-part="next-trigger" data-view="month">
                  <svg class="button__icon" 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 class="button button--sm button--square rounded-full border-contrast-brand text-contrast-brand" data-part="prev-trigger" data-view="year">
                  <svg class="button__icon" 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" class="button button--sm rounded-full border-contrast-brand text-contrast-brand">
                  </button>
                  <button class="button button--sm button--square rounded-full border-contrast-brand text-contrast-brand" data-part="next-trigger" data-view="year">
                  <svg class="button__icon" 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>

Templates

Date Picker components is available in the followng templates

Collapsible Dialog