Tailwind CSS Datetimepicker

Datetimepicker is a form that adds the function of selecting date and time without the necessity of using custom JavaScript code.

Basic example

Input with a modal for selecting a date and time.

Select a time

HTML
javascript

        
            
      <div
        class="relative mb-3"
        data-te-date-timepicker-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"
          id="form1" />
        <label
          for="form1"
          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 time</label
        >
      </div>

        
            
      // Initialization for ES Users
      import {
        Datetimepicker,
        Input,
        initTE,
      } from "tw-elements";
      
      initTE({ Datetimepicker, 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

You can use inline version with option data-te-inline.

Select a time

HTML
javascript

        
            
      <div
        class="relative mb-3"
        data-te-date-timepicker-init
        data-te-input-wrapper-init
        data-te-inline="true">
        <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"
          id="form2" />
        <label
          for="form2"
          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 time</label
        >
      </div>

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

Disabled

Use data-te-disabled="true" attribute on Datetimepicker to remove pointer events.

Add the disabled boolean attribute on an input with bg-neutral-100 and dark:bg-neutral-700 classes to give it a neutraled out appearance and remove pointer events and make it unusable and un-clickable.

Select a time

HTML
javascript

        
            
      <div
        class="relative mb-3"
        data-te-date-timepicker-init
        data-te-input-wrapper-init
        data-te-disabled="true">
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-neutral-100 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:bg-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
          id="form3" />
        <label
          for="form3"
          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 time</label
        >
      </div>

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

Disable past

Use data-te-disable-past="true" attribute to disallow selecting past dates.

Select a time

HTML
javascript

        
            
      <div
        class="relative mb-3"
        data-te-date-timepicker-init
        data-te-input-wrapper-init
        data-te-disable-past="true">
        <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"
          id="form4" />
        <label
          for="form4"
          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 time</label
        >
      </div>

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

Disable future

Use data-te-disable-future="true" attribute to disallow selecting future dates.

Select a time

HTML
javascript

        
            
      <div
        class="relative mb-3"
        data-te-date-timepicker-init
        data-te-input-wrapper-init
        data-te-disable-future="true">
        <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"
          id="form5" />
        <label
          for="form5"
          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 time</label
        >
      </div>

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

Default values

You can set default date and time with options defaultDate and defaultTime.

Select a time

HTML
javascript

        
            
      <div
        class="relative mb-3"
        data-te-date-timepicker-init
        data-te-input-wrapper-init
        data-te-default-date="22/01/2019"
        data-te-default-time="10:33 PM">
        <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"
          id="form6" />
        <label
          for="form6"
          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 time</label
        >
      </div>

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

Input toggle

Add data-te-date-timepicker-toggle-ref to the input element to enable toggling on input click. It is also possible to set toggleButton option to false to remove the toggle button.

Select a time

HTML
javascript

        
            
      <div
        class="relative mb-3"
        data-te-date-timepicker-init
        data-te-input-wrapper-init
        data-te-toggle-button="false">
        <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"
          id="form7"
          data-te-date-timepicker-toggle-ref />
        <label
          for="form7"
          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 time</label
        >
      </div>

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

Custom date and time options

Use datepicker or timepicker option to set custom options from our Datepicker and Timepicker components.

Datepicker options

Note: This options works only with JS initialization.

Select a time

HTML
javascript
umd

ES UMD

        
            
      <div
        class="relative mb-3"
        data-te-input-wrapper-init
        id="datetimepicker-dateOptions">
        <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"
          id="form8" />
        <label
          for="form8"
          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 time</label
        >
      </div>

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

      const pickerDateOptions = document.querySelector('#datetimepicker-dateOptions');
      new Datetimepicker(pickerDateOptions, {
        datepicker: { format: 'dd-mm-yyyy'},
      });

        
            
      const pickerDateOptions = document.querySelector('#datetimepicker-dateOptions');
      new te.Datetimepicker(pickerDateOptions, {
        datepicker: { format: 'dd-mm-yyyy'},
      });

Timepicker options

Note: This options works only with JS initialization.

Select a time

HTML
javascript
umd

ES UMD

        
            
      <div
        class="relative mb-3"
        data-te-input-wrapper-init
        id="datetimepicker-timeOptions">
        <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"
          id="form9" />
        <label
          for="form9"
          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 time</label
        >
      </div>

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

      const pickerTimeOptions = document.querySelector('#datetimepicker-timeOptions');
      new Datetimepicker(pickerTimeOptions, {
        timepicker: { format24: true },
      });

        
            
      const pickerTimeOptions = document.querySelector('#datetimepicker-timeOptions');
      new te.Datetimepicker(pickerTimeOptions, {
        timepicker: { format24: true },
      });

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 { Datetimepicker, initTE } from "tw-elements";
        initTE({ Datetimepicker });

        
            
        import "tw-elements";

Via data attributes

Elements with the data-te-date-timepicker-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="relative mb-3"
          data-te-date-timepicker-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"
            id="form1" />
          <label
            for="form1"
            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 time</label
          >
        </div>

Via JavaScript

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

javascript
umd

ES UMD

        
            
        const myDatetimepicker = new Datetimepicker(document.getElementById("myDatetimepicker"), options, classes);

        
            
        const myDatetimepicker = new te.Datetimepicker(document.getElementById("myDatetimepicker"), options, classes);

Options

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

Name	Type	Default	Description
`container`	String	`'body'`	Allows to set the parent element for the datepicker and timepicker.
`datepicker`	Object	`{}`	Allows to set datepicker options.
`defaultDate`	String\|Date\|Number	`-`	Allows to set default date.
`defaultTime`	String\|Date\|Number	`-`	Allows to set default time.
`disabled`	Boolean	`false`	Set a disabled attribute to input in wrapper.
`disablePast`	Boolean	`false`	Allows to disable the selection of the past time
`disableFuture`	Boolean	`false`	Allows to disable the selection of the future time
`inline`	Boolean	`false`	Allows to use a inline version of datetimepicker.
`showFormat`	Boolean	`false`	Adds placeholder with current format of datepicker.
`timepicker`	Object	`{}`	Allows to set timepicker options.
`toggleButton`	Boolean	`true`	Adds toggle button to input wrapper to show/hide datetimepicker
`dateTimepickerToggleIconTemplate`	string	`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z" clip-rule="evenodd" /> </svg>`	Adds icon to the toggle button of datetimepicker
`datepickerToggleIconTemplate`	string	`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z" clip-rule="evenodd" /> </svg>`	Adds icon to the toggle button of datepicker
`timepickerToggleIconTemplate`	string	`<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="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg>`	Adds icon to the toggle button of timepicker

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-toggle-button="bg-red-700"

Note: datepicker and timepicker options works only with JS initialization.

Name	Default	Description
`buttonsContainer`	flex justify-evenly items-end bg-primary dark:bg-zinc-800 dark:data-[te-buttons-timepicker]:bg-zinc-700	Sets classes for the container of toggle buttons in the header of timepicker and datepicker
`pickerIcon`	[&>svg]:w-6 [&>svg]:h-6 [&>svg]:mx-auto [&>svg]:pointer-events-none w-1/2 px-1.5 py-[1px] rounded-[10px] min-h-[40px] cursor-pointer outline-none border-none text-white hover:bg-primary-600 dark:hover:bg-neutral-600	Sets classes for the toggle buttons of timepicker and datepicker
`toggleButton`	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	Sets classes for the datetimepicker toggle button
`datepicker`	{ }	Can be used to add datepicker custom classes. Provide as an object. Use only with JS initialization.
`timepicker`	{ }	Can be used to add datepicker custom classes. Provide as an object. Use only with JS initialization.

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
`update`	Updates options of a Datetimepicker instance.	`myDatetimepicker.update({inline: true})`
`dispose`	Disposes a Datetimepicker instance	`myDatetimepicker.dispose()`
`getInstance`	Static method which allows you to get the Datetimepicker instance associated to a DOM element.	`Datetimepicker.getInstance(datetimepickerEl)`
`getOrCreateInstance`	Static method which returns the Datetimepicker instance associated to a DOM element or create a new one in case it wasn't initialized.	`Datetimepicker.getOrCreateInstance(datetimepickerEl)`

javascript
umd

ES UMD

        
            
        const datetimepickerEl = document.getElementById('myDatetimepicker');
        const datetimepicker = new Datetimepicker(datetimepickerEl);
        datetimepicker.dispose();

        
            
        const datetimepickerEl = document.getElementById('myDatetimepicker');
        const datetimepicker = new te.Datetimepicker(datetimepickerEl);
        datetimepicker.dispose();

Events

Event type	Description
`open.te.datetimepicker`	This event fires immediately when the datetimepicker is opened.
`close.te.datetimepicker`	This event fires immediately when the datetimepicker is closed.
`datetimeChange.te.datetimepicker`	This event fires immediately when the new input value is set.

JavaScript

        
            
        const myDatetimepicker = document.getElementById('myDatetimepicker')
        myDatetimepicker.addEventListener('open.te.datetimepicker', (e) => {
          // do something...
        })

Datetimepicker

Basic example

Inline version

Disabled

Disable past

Disable future

Default values

Input toggle

Custom date and time options

Datepicker options

Timepicker options

Related resources

Tutorials:

Extended Docs:

Design System (Figma):

Datetimepicker - API

Import

Via data attributes

Via JavaScript

Options

Classes

Methods

Events