Tailwind CSS Datepicker

Basic example

The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. Date pickers can be embedded into dialogs on mobile and text field dropdowns on desktop.

Select a date

HTML
javascript

        
            
      <div
        class="relative mb-3"
        data-te-datepicker-init
        data-te-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
          placeholder="Select a date" />
        <label
          for="floatingInput"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
          >Select a date</label
        >
      </div>

        
            
      // Initialization for ES Users
      import {
        Datepicker,
        Input,
        initTE,
      } from "tw-elements";
      
      initTE({ Datepicker, Input });

Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

Inline version

Use the data-te-inline="true" attribute to initialize and set the default date for an inline datepicker inside a block element.

Select a date

HTML
javascript

        
            
      <div
        class="relative mb-3"
        data-te-datepicker-init
        data-te-inline="true"
        data-te-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
          placeholder="Select a date" />
        <label
          for="floatingInput"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
          >Select a date</label
        >
      </div>

        
            
      // Initialization for ES Users
      import {
        Datepicker,
        Input,
        initTE,
      } from "tw-elements";
      
      initTE({ Datepicker, Input });

Translations

The picker can be customized to add support for internationalization. Modify the component options to add translations.

Select a date

HTML
javascript
umd

ES UMD

        
            
      <div
        id="datepicker-translated"
        class="relative"
        data-te-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
          placeholder="Select a date" />
        <label
          for="floatingInput"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
          >Select a date</label
        >
      </div>

        
            
      import {
        Datepicker,
        Input,
        initTE,
      } from "tw-elements";
      
      initTE({ Input });

      const datepickerTranslated = new Datepicker(
        document.querySelector("#datepicker-translated"),
        {
          title: "Datum auswählen",
          monthsFull: [
            "Januar",
            "Februar",
            "März",
            "April",
            "Mai",
            "Juni",
            "Juli",
            "August",
            "September",
            "Oktober",
            "November",
            "Dezember",
          ],
          monthsShort: [
            "Jan",
            "Feb",
            "Mär",
            "Apr",
            "Mai",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Okt",
            "Nov",
            "Dez",
          ],
          weekdaysFull: [
            "Sonntag",
            "Montag",
            "Dienstag",
            "Mittwoch",
            "Donnerstag",
            "Freitag",
            "Samstag",
          ],
          weekdaysShort: ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"],
          weekdaysNarrow: ["S", "M", "D", "M", "D", "F", "S"],
          okBtnText: "Ok",
          clearBtnText: "Klar",
          cancelBtnText: "Schließen",
        }
      );

        
            
      const datepickerTranslated = new te.Datepicker(
        document.querySelector("#datepicker-translated"),
        {
          title: "Datum auswählen",
          monthsFull: [
            "Januar",
            "Februar",
            "März",
            "April",
            "Mai",
            "Juni",
            "Juli",
            "August",
            "September",
            "Oktober",
            "November",
            "Dezember",
          ],
          monthsShort: [
            "Jan",
            "Feb",
            "Mär",
            "Apr",
            "Mai",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Okt",
            "Nov",
            "Dez",
          ],
          weekdaysFull: [
            "Sonntag",
            "Montag",
            "Dienstag",
            "Mittwoch",
            "Donnerstag",
            "Freitag",
            "Samstag",
          ],
          weekdaysShort: ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"],
          weekdaysNarrow: ["S", "M", "D", "M", "D", "F", "S"],
          okBtnText: "Ok",
          clearBtnText: "Klar",
          cancelBtnText: "Schließen",
        }
      );

Formats

Use format option to display date in a human-friendly format.

Select a date

HTML
javascript

        
            
      <div
        class="relative mb-3"
        data-te-datepicker-init
        data-te-format="dd, mmm, yyyy"
        data-te-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
          placeholder="Select a date" />
        <label
          for="floatingInput"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
          >Select a date</label
        >
      </div>

        
            
      // Initialization for ES Users
      import {
        Datepicker,
        Input,
        initTE,
      } from "tw-elements";
      
      initTE({ Datepicker, Input });

Formatting rules

The following rules can be used to format any date:

Note: When using ddd and dddd formats, you need to also provide d or dd. For example: data-mdb-format="ddd, dd, mmm, yyyy"

Rule	Description	Result
`d`	Date of the month	1 – 31
`dd`	Date of the month with a leading zero	01 – 31
`ddd`	Day of the week in short form	Sun – Sat
`dddd`	Day of the week in full form	Sunday – Saturday
`m`	Month of the year	1 – 12
`mm`	Month of the year with a leading zero	01 – 12
`mmm`	Month name in short form	Jan – Dec
`mmmm`	Month name in full form	January – December
`yy`	Year in short form *	00 – 99
`yyyy`	Year in full form	2000 – 2999

Date limits

Set the minimum and maximum selectable dates with the min and max options.

Select a date

HTML
javascript
umd

ES UMD

        
            
      <div
        class="relative mb-3"
        id="datepicker-with-limits"
        data-te-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
          placeholder="Select a date" />
        <label
          for="floatingInput"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
          >Select a date</label
        >
      </div>

        
            
      import {
        Datepicker,
        Input,
        initTE,
      } from "tw-elements";
      
      initTE({ Input });

      const datepickerWithLimits = document.getElementById('datepicker-with-limits');
      new Datepicker(datepickerWithLimits, {
        min: new Date(2020, 5, 10),
        max: new Date(2023, 5, 20)
      });

        
            
      const datepickerWithLimits = document.getElementById('datepicker-with-limits');
      new te.Datepicker(datepickerWithLimits, {
        min: new Date(2020, 5, 10),
        max: new Date(2023, 5, 20)
      });

Disable past

Use the disablePast option to disallow past date selection.

Select a date

HTML
javascript
umd

ES UMD

        
            
      <div
        class="relative mb-3"
        id="datepicker-disable-past"
        data-te-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
          placeholder="Select a date" />
        <label
          for="floatingInput"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
          >Select a date</label
        >
      </div>

        
            
      import {
        Datepicker,
        Input,
        initTE,
      } from "tw-elements";
      
      initTE({ Input });

      const datepickerDisablePast = document.getElementById('datepicker-disable-past');
      new Datepicker(datepickerDisablePast, {
        disablePast: true
      });

        
            
      const datepickerDisablePast = document.getElementById('datepicker-disable-past');
      new te.Datepicker(datepickerDisablePast, {
        disablePast: true
      });

Disable future

Use the disableFuture option to disallow past date selection.

Select a date

HTML
javascript
umd

ES UMD

        
            
      <div
        class="relative mb-3"
        id="datepicker-disable-future"
        data-te-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
          placeholder="Select a date" />
        <label
          for="floatingInput"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
          >Select a date</label
        >
      </div>

        
            
      import {
        Datepicker,
        Input,
        initTE,
      } from "tw-elements";
      
      initTE({ Input });

      const datepickerDisableFuture = document.getElementById('datepicker-disable-future');
      new Datepicker(datepickerDisableFuture, {
        disableFuture: true
      });

        
            
      const datepickerDisableFuture = document.getElementById('datepicker-disable-future');
      new te.Datepicker(datepickerDisableFuture, {
        disableFuture: true
      });

Disabled dates

The filter option accept function in which you can specify conditions for date filtering. A result of true indicates that the date should be valid and a result of false indicates that it should be disabled. In the following example all saturdays and sundays will be disabled.

Select a date

HTML
javascript
umd

ES UMD

        
            
      <div
        class="relative mb-3"
        id="datepicker-disabled-dates"
        data-te-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
          placeholder="Select a date" />
        <label
          for="floatingInput"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
          >Select a date</label
        >
      </div>

        
            
      import {
        Datepicker,
        Input,
        initTE,
      } from "tw-elements";
      
      initTE({ Input });

      const datepickerWithFilter = document.getElementById('datepicker-disabled-dates');

      const filterFunction = (date) => {
        const isSaturday = date.getDay() === 6;
        const isSunday = date.getDay() === 0;
    
        return !isSaturday && !isSunday;
      }
    
      new Datepicker(datepickerWithFilter, { filter: filterFunction });

        
            
      const datepickerWithFilter = document.getElementById('datepicker-disabled-dates');

      const filterFunction = (date) => {
        const isSaturday = date.getDay() === 6;
        const isSunday = date.getDay() === 0;
    
        return !isSaturday && !isSunday;
      }
    
      new te.Datepicker(datepickerWithFilter, { filter: filterFunction });

Input toggle

Add data-te-datepicker-toggle-ref and data-te-datepicker-toggle-button-ref to the input element to enable toggling on input click.

Select a date

HTML
javascript

        
            
      <div
        class="relative mb-3"
        data-te-datepicker-init
        data-te-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
          placeholder="Select a date"
          data-te-datepicker-toggle-ref
          data-te-datepicker-toggle-button-ref />
        <label
          for="floatingInput"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
          >Select a date</label
        >
      </div>

        
            
      // Initialization for ES Users
      import {
        Datepicker,
        Input,
        initTE,
      } from "tw-elements";
      
      initTE({ Datepicker, Input });

Custom toggle icon

Customize the toggle icon by adding a toggle button template to the component.

Select a date

HTML
javascript

        
            
      <div
        class="relative mb-3"
        data-te-datepicker-init
        data-te-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
          placeholder="Select a date" />
        <label
          for="floatingInput"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
          >Select a date</label
        >
        <button
          data-te-datepicker-toggle-ref
          data-te-datepicker-toggle-button-ref
          class="justify-content-center absolute right-0.5 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center border-none bg-transparent outline-none hover:text-primary focus:text-primary dark:text-neutral-200 dark:hover:text-primary-400 dark:focus:text-primary-400 [&>svg]:h-5 [&>svg]:w-5">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor">
            <path
              fill-rule="evenodd"
              d="M11.47 4.72a.75.75 0 011.06 0l7.5 7.5a.75.75 0 11-1.06 1.06L12 6.31l-6.97 6.97a.75.75 0 01-1.06-1.06l7.5-7.5zm.53 7.59l-6.97 6.97a.75.75 0 01-1.06-1.06l7.5-7.5a.75.75 0 011.06 0l7.5 7.5a.75.75 0 11-1.06 1.06L12 12.31z"
              clip-rule="evenodd" />
          </svg>
        </button>
      </div>

        
            
      // Initialization for ES Users
      import {
        Datepicker,
        Input,
        initTE,
      } from "tw-elements";
      
      initTE({ Datepicker, Input });

Close without confirmation

This option close datepicker when the date is selected.

Select a date

HTML
javascript
umd

ES UMD

        
            
      <div
        class="relative mb-3"
        id="datepicker-close-without-confirmation"
        data-te-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
          placeholder="Select a date" />
        <label
          for="floatingInput"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
          >Select a date</label
        >
      </div>

        
            
      import {
        Datepicker,
        Input,
        initTE,
      } from "tw-elements";
      
      initTE({ Input });

      const confirmDateOnSelect = document.getElementById('datepicker-close-without-confirmation');
      new Datepicker(confirmDateOnSelect, {
        confirmDateOnSelect: true,
      });

        
            
      const confirmDateOnSelect = document.getElementById('datepicker-close-without-confirmation');
      new te.Datepicker(confirmDateOnSelect, {
        confirmDateOnSelect: true,
      });

Remove Action Buttons

You can use options removeOkBtn, removeCancelBtn or removeClearBtn to remove action buttons that you don't need in your datepicker modal.

Select a date

HTML
javascript
umd

ES UMD

        
            
      <div
        class="relative mb-3"
        id="datepicker-remove-action-buttons"
        data-te-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
          placeholder="Select a date" />
        <label
          for="floatingInput"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
          >Select a date</label
        >
      </div>

        
            
      import {
        Datepicker,
        Input,
        initTE,
      } from "tw-elements";
      
      initTE({ Input });

      const datepickerWithoutClearButton = document.getElementById('datepicker-remove-action-buttons');
      new Datepicker(datepickerWithoutClearButton , {
        removeClearBtn: true,
      });

        
            
      const datepickerWithoutClearButton = document.getElementById('datepicker-remove-action-buttons');
      new te.Datepicker(datepickerWithoutClearButton , {
        removeClearBtn: true,
      });

Accessibility

We added proper aria attributes to the datepicker controls to make the component accessible. It's possible to change the values of those attributes by modifying the component options:

javascript

        
            
      okBtnLabel: 'Confirm selection', clearBtnLabel: 'Clear selection',
      cancelBtnLabel: 'Cancel selection', nextMonthLabel: 'Next month',
      prevMonthLabel: 'Previous month', nextYearLabel: 'Next year',
      prevYearLabel: 'Previous year', nextMultiYearLabel: 'Next 24 years',
      prevMultiYearLabel: 'Previous 24 years', switchToMultiYearViewLabel:
      'Choose year and month', switchToMonthViewLabel: 'Choose date',
      switchToDayViewLabel: 'Choose date',

Import

Importing components depends on how your application works. If you intend to use the TW elements ES format, you must first import the component and then initialize it with the initTE method. If you are going to use the UMD format, just import the tw-elements package.

javascript
umd

ES UMD

        
            
        import { Datepicker, Input, initTE } from "tw-elements";
        initTE({ Datepicker, Input });

        
            
        import "tw-elements";

Usage

Via data attributes

Elements with the data-te-datepicker-init attribute will be automatically initialized - you can set all available options with data attributes. For ES format, you must first import and call the initTE method.

HTML

        
            
        <div class="flex items-center justify-center">
          <div
            class="relative mb-3 xl:w-96"
            data-te-datepicker-init
            data-te-input-wrapper-init>
            <input
              type="text"
              class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[2.15] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-gray-200 dark:placeholder:text-gray-200 [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
              placeholder="Select a date" />
            <label
              for="floatingInput"
              class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[2.15] text-gray-500 transition-all duration-200 ease-out peer-focus:-translate-y-[1.15rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[1.15rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-gray-200 dark:peer-focus:text-gray-200"
              >Select a date</label
            >
          </div>
        </div>

Via JavaScript

You can access an instance from your Javascript code, by using the getInstance static method of the Datepicker class - it allows making use of all the public methods listed in the Methods section.

HTML
javascript
umd

ES UMD

        
            
        <div class="flex items-center justify-center">
          <div
            id="myDatepicker"
            class="relative mb-3 xl:w-96"
            data-te-input-wrapper-init>
            <input
              type="text"
              class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[2.15] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-gray-200 dark:placeholder:text-gray-200 [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
              placeholder="Select a date" />
            <label
              for="floatingInput"
              class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[2.15] text-gray-500 transition-all duration-200 ease-out peer-focus:-translate-y-[1.15rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[1.15rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-gray-200 dark:peer-focus:text-gray-200"
              >Select a date</label
            >
          </div>
        </div>

        
            
          const options = {
            format: "dd-mm-yyyy",
          };
          const myDatepicker = new Datepicker(
            document.getElementById("myDatepicker"),
            options
          );

        
            
        const options = {
          format: "dd-mm-yyyy",
        };
        const myDatepicker = new te.Datepicker(
          document.getElementById("myDatepicker"),
          options
        );

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-te-, as in data-te-cancel-btn-label="cancel".

Name	Type	Default	Description
`cancelBtnLabel`	String	`"Cancel selection"`	Changes cancel button aria label
`cancelBtnText`	String	`"Cancel"`	Changes cancel button text
`changeMonthIconTemplate`	String	`"<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /> </svg>"`	Changes next/prev month button template
`clearBtnLabel`	String	`"Clear selection"`	Changes clear button aria label
`clearBtnText`	String	`"Clear"`	Changes clear button text
`confirmDateOnSelect`	Boolean	`false`	Closes datepicker modal when the date is selected
`container`	String	`"body"`	Allows to set the parent element for the datepicker.
`disablePast`	Boolean	`false`	Disables selection of past dates
`disableFuture`	Boolean	`false`	Disables selection of future dates
`disableInput`	Boolean	`false`	Disables datepicker input
`disableToggleButton`	Boolean	`false`	Disables toggle button
`filter`	Function	`-`	Disables dates that meet the specified condition
`format`	String	`"dd/mm/yyyy"`	hanges date format displayed in input
`inline`	Boolean	`false`	Changes datepicker display mode to inline (dropdown)
`max`	Date	`-`	Changes max available date
`min`	Date	`-`	Changes min available date
`monthsFull`	Array	`[ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]`	Changes array of months full names
`monthsShort`	Array	`['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']`	Changes array of months short names
`nextMonthLabel`	String	`"Next month"`	Changes next button aria label in days view
`nextMultiYearLabel`	String	`"Next 24 years"`	Changes next button aria label in years view
`nextYearLabel`	String	`"Next year"`	Changes next button aria label in months view
`okBtnText`	String	`"Ok"`	Changes ok button text
`okBtnLabel`	String	`"Confirm selection"`	Changes ok button aria label
`prevMonthLabel`	String	`"Previous month"`	Changes previous button aria label in days view
`prevMultiYearLabel`	String	`"Previous 24 years"`	Changes previous button aria label in years view
`prevYearLabel`	String	`"Previous year"`	Changes previous button aria label in months view
`removeCancelBtn`	Boolean	`false`	Removes `Cancel` button from datepicker modal
`removeClearBtn`	Boolean	`false`	Removes `Clear` button from datepicker modal
`removeOkBtn`	Boolean	`false`	Removes `Ok` button from datepicker modal
`startDate`	(Null\|String\|Date)	`null`	Changes default date to which datepicker will navigate
`startDay`	Number	`0`	Changes default start day (0 for Sunday, 1 for Monday...)
`switchToDayViewLabel`	String	`"Choose date"`	Changes view change button aria label in years view
`switchToMonthViewLabel`	String	`"Choose date"`	Changes view change button aria label in months view
`switchToMultiYearViewLabel`	String	`"Choose year and month"`	Changes view change button aria label in days view
`title`	String	`"Select date"`	Changes datepicker title
`view`	String	`"days"`	Changes default datepicker view (days/years/months)
`viewChangeIconTemplate`	String	`"<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="0" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /> </svg>"`	Changes view change button template
`weekdaysFull`	Array	`['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']`	Changes array of weekdays full names
`weekdaysNarrow`	Array	`['S', 'M', 'T', 'W', 'T', 'F', 'S']`	Changes array of weekdays narrow names
`weekdaysShort`	Array	`['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`	Changes array of weekdays short names

Classes

Custom classes can be passed via data attributes or JavaScript. For data attributes, append the class name to data-te-class, as in data-te-class-fade-in="animate-[fade-in_1.3s_both] px-[auto] motion-reduce:transition-none motion-reduce:animate-none" (default animation duration is 0.3s).

Name	Default	Description
`datepickerArrowControls`	mt-2.5	Sets margin top for next and prev month buttons.
`datepickerBackdrop`	w-full h-full fixed top-0 right-0 left-0 bottom-0 bg-black/40 z-[1065]	Sets size, position and background color for datepicker backdrop
`datepickerCell`	text-center data-[te-datepicker-cell-disabled]:text-neutral-300 data-[te-datepicker-cell-disabled]:cursor-default data-[te-datepicker-cell-disabled]:pointer-events-none data-[te-datepicker-cell-disabled]:hover:cursor-default hover:cursor-pointer group	Sets size, alignment, text color and other styles for cell wrapper.
`datepickerCellContent`	mx-auto group-[:not([data-te-datepicker-cell-disabled]):not([data-te-datepicker-cell-selected]):hover]:bg-neutral-300 group-[[data-te-datepicker-cell-selected]]:bg-blue-500 group-[[data-te-datepicker-cell-selected]]:text-white group-[:not([data-te-datepicker-cell-selected])[data-te-datepicker-cell-focused]]:bg-neutral-100 group-[[data-te-datepicker-cell-focused]]:data-[te-datepicker-cell-selected]:bg-blue-500 group-[[data-te-datepicker-cell-current]]:border-solid group-[[data-te-datepicker-cell-current]]:border-black group-[[data-te-datepicker-cell-current]]:border dark:group-[:not([data-te-datepicker-cell-disabled]):not([data-te-datepicker-cell-selected]):hover]:bg-white/10 dark:group-[[data-te-datepicker-cell-current]]:border-white dark:group-[:not([data-te-datepicker-cell-selected])[data-te-datepicker-cell-focused]]:bg-white/10 dark:text-white dark:group-[[data-te-datepicker-cell-disabled]]:text-neutral-500	Main colors for different cell states (hover, focus, current etc.)
`datepickerCellContentLarge`	w-[72px] h-10 leading-10 py-[1px] px-0.5 rounded-[999px]	Size, paddings and border radius for large cell content.
`datepickerCellContentSmall`	w-9 h-9 leading-9 rounded-[50%] text-[13px]	Size, border radius and font size for small cell content.
`datepickerCellLarge`	w-[76px] h-[42px]	Size of large cells.
`datepickerCellSmall`	w-10 h-10 xs:max-md:landscape:w-8 xs:max-md:landscape:h-8	Size of small cells with different width breakpoints.
`datepickerClearBtn`	mr-auto	Margin for clear button (to set it's position).
`datepickerDate`	xs:max-md:landscape:mt-24 h-[72px] flex flex-col justify-end	Margins and display options for header date wrapper.
`datepickerDateText`	text-[34px] font-normal text-white	Size, font size and text color of header date text.
`datepickerDateControls`	px-3 pt-2.5 pb-0 flex justify-between text-black/[64]	Sets paddings, display options and text color of datepicker controls: prev and next buttons and view change button.
`datepickerDayHeading`	w-10 h-10 text-center text-[12px] font-normal dark:text-white	Size, font and alignment for table header (narrow weekdays)
`datepickerFooter`	h-14 flex absolute w-full bottom-0 justify-end items-center px-3	Size, position and alignment for datepicker footer wrapper.
`datepickerDropdownContainer`	w-[328px] h-[380px] bg-white rounded-lg shadow-[0px_2px_15px_-3px_rgba(0,0,0,.07),_0px_10px_20px_-2px_rgba(0,0,0,.04)] z-[1066] dark:bg-zinc-700	Size, position, shadow and colors for datepicker dropdown container (inline datepicker).
`datepickerFooterBtn`	outline-none bg-white text-blue-500 border-none cursor-pointer py-0 px-2.5 uppercase text-[0.8rem] leading-10 font-medium h-10 tracking-[.1rem] rounded-[10px] mb-2.5 hover:bg-neutral-200 focus:bg-neutral-200 dark:bg-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10	Styles for buttons that are placed inside the footer.
`datepickerHeader`	xs:max-md:landscape:h-full h-[120px] px-6 bg-blue-500 flex flex-col rounded-t-lg dark:bg-zinc-800	Size, paddings, background and other styles for header wrapper.
`datepickerNextButton`	p-0 w-10 h-10 leading-10 border-none outline-none m-0 text-gray-600 bg-transparent hover:bg-neutral-200 hover:rounded-[50%] focus:bg-neutral-200 focus:rounded-[50%] dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:rotate-180 [&>svg]:mx-auto	Styling for next button (controls) and icon.
`datepickerPreviousButton`	p-0 w-10 h-10 leading-10 border-none outline-none m-0 text-gray-600 bg-transparent mr-6 hover:bg-neutral-200 hover:rounded-[50%] focus:bg-neutral-200 focus:rounded-[50%] dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:mx-auto	Styling for prev button (controls) and icon.
`datepickerTable`	mx-auto w-[304px]	Size and horizontal margin of day cells.
`datepickerTitle`	h-8 flex flex-col justify-end	Styling for datepicker title wrapper.
`datepickerTitleText`	text-[10px] font-normal uppercase tracking-[1.7px] text-white	Font styles for datepicker title text.
`datepickerToggleButton`	flex items-center justify-content-center [&>svg]:w-5 [&>svg]:h-5 absolute outline-none border-none bg-transparent right-0.5 top-1/2 -translate-x-1/2 -translate-y-1/2 hover:text-primary focus:text-primary dark:hover:text-primary-400 dark:focus:text-primary-400 dark:text-neutral-200	Styling for datepicker toggle button (inside input)
`datepickerMain`	relative h-full	Position and height of datepicker main content.
`datepickerView`	outline-none px-3	Padding and outline for datepicker table wraper.
`datepickerViewChangeIcon`	inline-block pointer-events-none ml-[3px] [&>svg]:w-4 [&>svg]:h-4 [&>svg]:fill-neutral-500 dark:[&>svg]:fill-white	Size and appaearance of change view icons.
`datepickerViewChangeButton`	flex items-center outline-none p-2.5 text-neutral-500 font-medium text-[0.9rem] rounded-xl shadow-none bg-transparent m-0 border-none hover:bg-neutral-200 focus:bg-neutral-200 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10	Styling for datepicker change view button.
`fadeIn`	animate-[fade-in_0.3s_both] px-[auto] motion-reduce:transition-none motion-reduce:animate-none	Classes for setting proper animation on datepicker open
`fadeInShort`	animate-[fade-in_0.15s_both] px-[auto] motion-reduce:transition-none motion-reduce:animate-none	Classes for setting proper animation on backdrop open
`fadeOut`	animate-[fade-out_0.3s_both] px-[auto] motion-reduce:transition-none motion-reduce:animate-none	Classes for setting proper animation on datepicker close
`fadeOutShort`	animate-[fade-out_0.15s_both] px-[auto] motion-reduce:transition-none motion-reduce:animate-none	Classes for setting proper animation on backdrop close
`modalContainer`	flex flex-col fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[328px] h-[512px] bg-white rounded-[0.6rem] shadow-lg z-[1066] xs:max-md:landscape:w-[475px] xs:max-md:landscape:h-[360px] xs:max-md:landscape:flex-row dark:bg-zinc-700	Styling for main wrapper of datepicker.

javascript
umd

ES UMD

        
            
          new Datepicker(
            document.querySelector("#datepicker"),
            {
              cancelBtnText: "Cancel Picking",
            },
            {
              fadeIn:
                "animate-[fade-in_1.3s_both] px-[auto] motion-reduce:transition-none motion-reduce:animate-none",
            }
          );

        
            
          new te.Datepicker(
            document.querySelector("#datepicker"),
            {
              cancelBtnText: "Cancel Picking",
            },
            {
              fadeIn:
                "animate-[fade-in_1.3s_both] px-[auto] motion-reduce:transition-none motion-reduce:animate-none",
            }
          );

Methods

Asynchronous methods and transitions:
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

Method	Description	Example
`open`	Manually opens a datepicker	`myDatepicker.open()`
`close`	Manually closes a datepicker	`myDatepicker.close()`
`dispose`	Disposes a datepicker instance	`myDatepicker.dispose()`
`getInstance`	Static method which allows you to get the datepicker instance associated to a DOM element.	`Datepicker.getInstance(datepickerEl)`
`getOrCreateInstance`	Static method which returns the datepicker instance associated to a DOM element or create a new one in case it wasn't initialized.	`Datepicker.getOrCreateInstance(datepickerEl)`
`update`	Updates options of a datepicker instance.	`datepicker.update({inline: true})`

javascript
umd

ES UMD

        
            
        const datepickerEl = document.getElementById("myDatepicker");
        const datepicker = new Datepicker(datepickerEl);
        datepicker.open();

        
            
          const datepickerEl = document.getElementById("myDatepicker");
          const datepicker = new te.Datepicker(datepickerEl);
          datepicker.open();

Events

Event type	Description
`open.te.datepicker`	This event fires immediately when the datepicker is opened.
`close.te.datepicker`	This event fires immediately when the datepicker is closed.
`dateChange.te.datepicker`	This event fires immediately when the new date is selected.

JavaScript

        
            
          const sidenav = document.getElementById("mySidenav");
          sidenav.addEventListener("update.te.sidenav", (event) => {
            console.log(event.margin, event.padding);
          });

Datepicker

Basic example

Inline version

Translations

Formats

Formatting rules

Date limits

Disable past

Disable future

Disabled dates

Input toggle

Custom toggle icon

Close without confirmation

Remove Action Buttons

Accessibility

Related resources

Tutorials:

Extended Docs:

Design System (Figma):

Datepicker - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Events