Tailwind CSS Timepicker

Use responsive timepicker component with helper examples for 12h and 24 timepickers, clock-like ui, min and max time range conditions & more.

Basic example

The timepicker allows users to enter a time either through text input, or by choosing a time from the clock. Time pickers can be embedded into dialogs on mobile and text field dropdowns on desktop.

Note: If you are using string with PM/AM, you have to have option format24 set to false otherwise your default time will be formated to 24h. Also if you are using string without PM/AM and you would like have 24h format hour you have to set option format24 to true. If you will only put a string without PM/AM and format24 set to false you are gonna have a timepicker with 12h and format set to AM with default.

Select a time

HTML
javascript

<div
  class="relative"
  data-twe-timepicker-init
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >Select a time</label
  >
</div>

// Initialization for ES Users
import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input, Timepicker });

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Inline Timepicker with 12h

TE Timepicker allows you to use an inline version of timepicker. Default version is with 12h.

Select a time

HTML
javascript
javascript

ES UMD

<div
  class="relative"
  id="timepicker-inline-12"
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0 dark:autofill:shadow-autofill"
    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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >Select a time</label
  >
</div>

import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input });

const pickerInline = document.querySelector("#timepicker-inline-12");
const timepickerMaxMin = new Timepicker(pickerInline, {
  format12: true,
  inline: true,
});

const pickerInline = document.querySelector("#timepicker-inline-12");
const timepickerMaxMin = new twe.Timepicker(pickerInline, {
  format12: true,
  inline: true,
});

Inline Timepicker with 24h

TE Timepicker allows you to use an inline version of timepicker. You have to add options format24 to true.

Select a time

HTML
javascript
javascript

ES UMD

<div
  class="relative"
  id="timepicker-inline-24"
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0 dark:autofill:shadow-autofill"
    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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >Select a time</label
  >
</div>

import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input });

const pickerInline2 = document.querySelector("#timepicker-inline-24");
const timepickerMaxMin2 = new Timepicker(pickerInline2, {
  format24:true,
  inline: true,
});

const pickerInline2 = document.querySelector("#timepicker-inline-24");
const timepickerMaxMin2 = new twe.Timepicker(pickerInline2, {
  format24: true,
  inline: true,
});

Custom Icon

You can set your custom icon to input. If you will add the icon, the main icon from the input will be replaced with yours. You have to add attribute data-twe-timepicker-toggle-button to your element with data-twe-toggle and data-twe-timepicker-icon to your icon.

With button

Select a time

HTML
javascript

<div
  class="relative"
  id="timepicker-with-button"
  data-twe-timepicker-init
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >Select a time</label
  >
  <button
    tabindex="0"
    type="button"
    class="absolute right-1.5 top-1/2 ms-auto h-4 w-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer border-none bg-transparent text-surface outline-none transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] hover:text-primary focus:text-primary motion-reduce:transition-none dark:text-white dark:hover:text-primary dark:focus:text-primary"
    data-twe-toggle="timepicker-with-button"
    data-twe-timepicker-toggle-button>
    <span data-twe-timepicker-icon>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="h-5 w-5">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5" />
      </svg>
    </span>
  </button>
</div>

// Initialization for ES Users
import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input, Timepicker });

With icon

Select a time

HTML
javascript

<div
  class="relative"
  id="timepicker-with-icon"
  data-twe-timepicker-init
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >Select a time</label
  >
  <span
    class="absolute right-1.5 top-1/2 ms-auto h-4 w-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer border-none bg-transparent text-surface outline-none transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] hover:text-primary focus:text-primary motion-reduce:transition-none dark:text-white dark:hover:text-primary dark:focus:text-primary"
    tabindex="0"
    type="button"
    role="button"
    data-twe-toggle="timepicker-with-icon"
    data-twe-timepicker-toggle-button
    data-twe-timepicker-icon>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="h-5 w-5">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5" />
    </svg>
  </span>
</div>

// Initialization for ES Users
import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input, Timepicker });

Without icon

TE Timepicker allows to set input without icon. You can set this with data-twe-with-icon set to false or with options withIcon set to false if you initialize timepicker with js.

Select a time

HTML
javascript
javascript

ES UMD

<div
  class="relative"
  id="timepicker-without-icon"
  data-twe-timepicker-init>
  <div class="relative" data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
      >Select a time</label
    >
  </div>
  <button
    class="mt-2 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
    data-twe-toggle="timepicker-without-icon"
    data-twe-ripple-init>
    Toggle Timepicker
  </button>
</div>
<div
  class="relative mb-3 xl:w-96"
  id="timepicker-without-icon-2"
  data-twe-with-icon="false">
  <div class="relative" data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
      >Select a time</label
    >
  </div>
  <button
    class="mt-2 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
    data-twe-ripple-init>
    Toggle Timepicker
  </button>
</div>

import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input });

const pickerWithoutIcon = document.querySelector("#timepicker-without-icon-2");
const timepickerWithoutIcon = new Timepicker(pickerWithoutIcon, {
  withIcon: false
});

const pickerWithoutIcon = document.querySelector("#timepicker-without-icon-2");
const timepickerWithoutIcon = new twe.Timepicker(pickerWithoutIcon, {
  withIcon: false
});

Default time

TE Timepicker allows to initialize a default time in the picker and input. You can set it with option defaultTime. This option accepts strings like:

12:34
12:34 PM
12:34 AM

and also new Date() format like:

new Date()
new Date().toLocaleTimeString([],{timeStyle: 'short'})

Note: If you are using string with PM/AM, you have to have option format24 set to false otherwise your default time will be formate to 24h. Also if you are using string without PM/AM and you would like have 24h format hour you have to set option format24 to true. If you will only put a string without PM/AM and format24 set to false you are gonna have a timepicker with 12h and format set to AM with default.

With string PM

With string AM

With string wighout AM/PM

With string 24h

With new Date with 12h

With new Date with 24h

HTML
javascript
javascript

ES UMD

<!--With string PM-->
<div
  class="relative"
  id="timepicker-default-time-string-pm"
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
    id="form7" />
  <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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >With string PM</label
  >
</div>

<!--With string AM-->
<div
  class="relative"
  id="timepicker-default-time-string-am"
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >With string AM</label
  >
</div>

<!--With string without AM/PM-->
<div
  class="relative"
  id="timepicker-default-time-string-without-pm-am"
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >With string wighout AM/PM</label
  >
</div>

<!--With string 24h-->
<div
  class="relative"
  id="timepicker-default-time-string-24h"
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
    id="form10" />
  <label
    for="form10"
    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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >With string 24h</label
  >
</div>

<!--With new Date with 12h-->
<div
  class="relative"
  id="timepicker-default-time-with-new-date-12h"
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
    id="form11" />
  <label
    for="form11"
    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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >With new Date with 12h</label
  >
</div>

<!--With new Date with 24h-->
<div
  class="relative"
  id="timepicker-default-time-with-new-date-24h"
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
    id="form12" />
  <label
    for="form12"
    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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >With new Date with 24h</label
  >
</div>

import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input });

//Default time string PM
const pickerStartedPM = document.querySelector(
  "#timepicker-default-time-string-pm "
);
const tmStartedPM = new Timepicker(pickerStartedPM, {
  defaultTime: "02:12 PM",
});

//Default time string AM
const pickerStartedAM = document.querySelector(
  "#timepicker-default-time-string-am"
);
const tmStartedAM = new Timepicker(pickerStartedAM, {
  defaultTime: "05:12 AM",
});

//Default time without PM/AM
const pickerStartedWithoutPmAm = document.querySelector(
  "#timepicker-default-time-string-without-pm-am"
);
const tmStartedWithoutPmAm = new Timepicker(pickerStartedWithoutPmAm, {
  defaultTime: "05:12",
});

//Default time with 24h
const pickerStartedWith24h = document.querySelector(
  "#timepicker-default-time-string-24h"
);
const tmStartedWith24h = new Timepicker(pickerStartedWith24h, {
  defaultTime: "23:44",
  format24: true,
});

//Default time date 12h
const pickerStartedWithDate12h = document.querySelector(
  "#timepicker-default-time-with-new-date-12h"
);
const tmStartedWithDate12h = new Timepicker(pickerStartedWithDate12h, {
  defaultTime: new Date(),
});

//Default time date 24h
const pickerStartedWithDate24h = document.querySelector(
  "#timepicker-default-time-with-new-date-24h"
);
const tmStartedWithDate24h = new Timepicker(pickerStartedWithDate24h, {
  defaultTime: new Date(),
  format24: true,
});

//Default time string PM
const pickerStartedPM = document.querySelector(
  "#timepicker-default-time-string-pm "
);
const tmStartedPM = new twe.Timepicker(pickerStartedPM, {
  defaultTime: "02:12 PM",
});

//Default time string AM
const pickerStartedAM = document.querySelector(
  "#timepicker-default-time-string-am"
);
const tmStartedAM = new twe.Timepicker(pickerStartedAM, {
  defaultTime: "05:12 AM",
});

//Default time without PM/AM
const pickerStartedWithoutPmAm = document.querySelector(
  "#timepicker-default-time-string-without-pm-am"
);
const tmStartedWithoutPmAm = new twe.Timepicker(pickerStartedWithoutPmAm, {
  defaultTime: "05:12",
});

//Default time with 24h
const pickerStartedWith24h = document.querySelector(
  "#timepicker-default-time-string-24h"
);
const tmStartedWith24h = new twe.Timepicker(pickerStartedWith24h, {
  defaultTime: "23:44",
  format24: true,
});

//Default time date 12h
const pickerStartedWithDate12h = document.querySelector(
  "#timepicker-default-time-with-new-date-12h"
);
const tmStartedWithDate12h = new twe.Timepicker(pickerStartedWithDate12h, {
  defaultTime: new Date(),
});

//Default time date 24h
const pickerStartedWithDate24h = document.querySelector(
  "#timepicker-default-time-with-new-date-24h"
);
const tmStartedWithDate24h = new twe.Timepicker(pickerStartedWithDate24h, {
  defaultTime: new Date(),
  format24: true,
});

Handle input value

If you want to handle input value on modal approve, you have to add custom event to selected picker.

Select a time

Input value:

HTML
javascript
javascript

ES UMD

<div id="timepicker-value" class="relative" data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
    data-twe-timepicker-format24="true"
    id="form13" />
  <label
    for="form13"
    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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >Select a time</label
  >
</div>
<div class="my-2">Input value: <span id="span-input-value"></span></div>

import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input });

const timepickerValue = document.querySelector("#timepicker-value");
const tminputValue = new Timepicker(timepickerValue);

timepickerValue.addEventListener("valueChanged.twe.timepicker", (input) => {
  const valueDiv = document.querySelector("#span-input-value");

  valueDiv.innerText = input.target.value;
});

const timepickerValue = document.querySelector("#timepicker-value");
const tminputValue = new twe.Timepicker(timepickerValue);

timepickerValue.addEventListener("valueChanged.twe.timepicker", (input) => {
  const valueDiv = document.querySelector("#span-input-value");

  valueDiv.innerText = input.target.value;
});

Format 24h

Timepicker allows you to use time format with 24 hours. You can set it with the JavaScript options or with data-twe-format24 set to true.

Select a time

HTML
javascript
javascript

ES UMD

<div
  class="relative"
  data-twe-format24="true"
  id="timepicker-format"
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0 dark:autofill:shadow-autofill"
    data-twe-toggle="timepicker"
    id="form14" />
  <label
    for="form14"
    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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >Select a time</label
  >
</div>

import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input });

const picker = document.querySelector("#timepicker-format");
const tpFormat24 = new Timepicker(picker, {
  format24: true,
});

const picker = document.querySelector("#timepicker-format");
const tpFormat24 = new twe.Timepicker(picker, {
  format24: true,
});

Just Input

You can set a timepicker to just an input.

Select a time

HTML
javascript

<div
  class="relative"
  data-twe-with-icon="false"
  data-twe-timepicker-init
  data-twe-input-wrapper-init
  id="timepicker-just-input">
  <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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
    data-twe-toggle="timepicker-just-input"
    id="form15" />
  <label
    for="form15"
    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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >Select a time</label
  >
</div>

// Initialization for ES Users
import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input, Timepicker });

Increment

You can set a increment value by 5 to a minutes.

Select a time

HTML
javascript
javascript

ES UMD

<div class="relative" id="timepicker-inc" data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0 dark:autofill:shadow-autofill"
    id="form16" />
  <label
    for="form16"
    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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >Select a time</label
  >
</div>

import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input });

const pickerInc = document.querySelector("#timepicker-inc");
const timepickerInc = new Timepicker(pickerInc, {
  increment: true,
});

const pickerInc = document.querySelector("#timepicker-inc");
const timepickerInc = new twe.Timepicker(pickerInc, {
  increment: true,
});

Max time

You can set max time to picker with options.

Select a time

HTML
javascript
javascript

ES UMD

<div
  class="relative"
  id="timepicker-max-time"
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
    id="form16" />
  <label
    for="form16"
    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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >Select a time</label
  >
</div>

import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input });

const pickerMaxTime = document.querySelector("#timepicker-max-time");
const timepickerMaxTime = new Timepicker(pickerMaxTime, {
  maxTime: "6:35",
});

const pickerMaxTime = document.querySelector("#timepicker-max-time");
const timepickerMaxTime = new twe.Timepicker(pickerMaxTime, {
  maxTime: "6:35",
});

Max time with PM

You can set max time to timepicker with options.

Select a time

HTML
javascript
javascript

ES UMD

<div
  class="relative"
  id="timepicker-max-time-pm"
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
    id="form17" />
  <label
    for="form17"
    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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >Select a time</label
  >
</div>

import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input });

const pickerMaxTimePM = document.querySelector("#timepicker-max-time-pm");
const tmMaxPm = new Timepicker(pickerMaxTimePM, {
  maxTime: "6:35 PM",
});

const pickerMaxTimePM = document.querySelector("#timepicker-max-time-pm");
const tmMaxPm = new twe.Timepicker(pickerMaxTimePM, {
  maxTime: "6:35 PM",
});

Max time with AM

You can set max time to timepicker with options.

Select a time

HTML
javascript
javascript

ES UMD

<div
  class="relative"
  id="timepicker-max-time-am"
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
    id="form18" />
  <label
    for="form18"
    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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >Select a time</label
  >
</div>

import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input });

const pickerMaxTimeAM = document.querySelector("#timepicker-max-time-am");
const tmMaxAm = new Timepicker(pickerMaxTimeAM, {
  maxTime: "6:35 AM",
});

const pickerMaxTimeAM = document.querySelector("#timepicker-max-time-am");
const tmMaxAm = new twe.Timepicker(pickerMaxTimeAM, {
  maxTime: "6:35 AM",
});

Min time

You can set min time to timepicker with options.

Select a time

HTML
javascript
javascript

ES UMD

<div
  class="relative"
  id="timepicker-min-time"
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
    id="form19" />
  <label
    for="form19"
    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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >Select a time</label
  >
</div>

import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input });

const pickerMinTime = document.querySelector("#timepicker-min-time");
const timepickerMinTime = new Timepicker(pickerMinTime, {
  minTime: "10:15",
});

const pickerMinTime = document.querySelector("#timepicker-min-time");
const timepickerMinTime = new twe.Timepicker(pickerMinTime, {
  minTime: "10:15",
});

Min time with PM

You can set min time to timepicker with options.

Select a time

HTML
javascript
javascript

ES UMD

<div
  class="relative"
  id="timepicker-min-time-pm"
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
    id="form20" />
  <label
    for="form20"
    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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >Select a time</label
  >
</div>

import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input });

const pickerMinTimePM = document.querySelector("#timepicker-min-time-pm");
const tmMinPm = new Timepicker(pickerMinTimePM, {
  minTime: "6:35 PM",
});

const pickerMinTimePM = document.querySelector("#timepicker-min-time-pm");
const tmMinPm = new twe.Timepicker(pickerMinTimePM, {
  minTime: "6:35 PM",
});

Min time with AM

You can set min time to timepicker with options.

Select a time

HTML
javascript
javascript

ES UMD

<div
  class="relative"
  id="timepicker-min-time-am"
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
    id="form21" />
  <label
    for="form21"
    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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >Select a time</label
  >
</div>

import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input });

const pickerMinTimeAM = document.querySelector("#timepicker-min-time-am");
const tmMinAm = new Timepicker(pickerMinTimeAM, {
  minTime: "6:35 AM",
});

const pickerMinTimeAM = document.querySelector("#timepicker-min-time-am");
const tmMinAm = new twe.Timepicker(pickerMinTimeAM, {
  minTime: "6:35 AM",
});

Disable past

Use the disablePast option to disallow past time selection.

Select a time

HTML
javascript
javascript

ES UMD

<div
  class="relative"
  id="timepicker-disable-past"
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
    id="form22" />
  <label
    for="form22"
    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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >Select a time</label
  >
</div>

import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input });

const pickerDisablePast = document.querySelector("#timepicker-disable-past");
const timepickerDisablePast = new Timepicker(pickerDisablePast, {
  disablePast: true,
});

const pickerDisablePast = document.querySelector("#timepicker-disable-past");
const timepickerDisablePast = new twe.Timepicker(pickerDisablePast, {
  disablePast: true,
});

Disable future

Use the disableFuture option to disallow future time selection.

Select a time

HTML
javascript
javascript

ES UMD

<div
  class="relative"
  id="timepicker-disable-future"
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
    id="form23" />
  <label
    for="form23"
    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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
    >Select a time</label
  >
</div>

import {
  Input,
  Timepicker,
  initTWE,
} from "tw-elements";

initTWE({ Input });

const pickerDisableFuture = document.querySelector(
  "#timepicker-disable-future"
);
const timepickerDisableFuture = new Timepicker(pickerDisableFuture, {
  disableFuture: true,
});

const pickerDisableFuture = document.querySelector(
  "#timepicker-disable-future"
);
const timepickerDisableFuture = new twe.Timepicker(pickerDisableFuture, {
  disableFuture: true,
});

Accessibility

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

amLabel: 'AM',
cancelLabel: 'Cancel',
clearLabel: 'Clear',
invalidLabel: 'Invalid Time Format',
okLabel: 'Ok',
pmLabel: 'PM',

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 initTWE method. If you are going to use the UMD format, just import the tw-elements package.

javascript
javascript

ES UMD

import { Timepicker, Input, initTWE } from "tw-elements";
initTWE({ Timepicker, Input });

import "tw-elements";

Usage

Timepicker allows to select a time and display it on the selected output. It can be initialized automatically by adding data-twe-timepicker-init attribute, or manually with JS.

Via data attributes

Elements with the data-twe-input-wrapper-init and data-twe-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 initTWE method.

HTML

<div
  class="relative mb-3 xl:w-96"
  data-twe-timepicker-init
  data-twe-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-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-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-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 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 Timepicker class - it allows making use of all the public methods listed in the Methods section.

javascript
javascript

ES UMD

const myTimepicker = new Timepicker(document.getElementById('wrapper-id'), options);

const myTimepicker = new twe.Timepicker(document.getElementById('wrapper-id'), options);

Options

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

Name	Type	Default	Description
`appendValidationInfo`	Boolean	`true`	Allows to append div with information about invalid format.
`bodyID`	String	`""`	Allows to set Timepicker modal body ID.
`cancelLabel`	String	`"Cancel"`	Text of cancel button.
`clearLabel`	String	`"Clear"`	Text of clear button.
`closeModalOnMinutesClick`	Boolean	`true`	Allows to close modal if minutes are selected.
`container`	String	`"body"`	Allows to set the parent element for the timepicker.
`disabled`	Boolean	`false`	Set a disabled attribute to input in wrapper.
`enableValidation`	Boolean	`true`	Enables input validation.
`footerID`	Boolean	`false`	Allows to set Timepicker modal footer ID.
`format12`	Boolean	`true`	Allows to use format 12h.
`format24`	Boolean	`false`	Allows to use format 24h.
`headID`	String	`""`	Allows to set Timepicker modal head ID.
`increment`	Boolean	`false`	Allows to set increment minutes by 5.
`inline`	Boolean	`false`	Allows to use a inline version of timepicker.
`invalidLabel`	String	`"Invalid Time Format"`	Allows to change a text in the invalid div.
`minTime`	String	`""`	Allows to set min time for picker. It accepts minutes and optionally AM/PM format.
`maxTime`	String	`""`	Allows to set max time for picker. It accepts minutes and optionally AM/PM format.
`modalID`	String	`""`	Allows to set Timepicker modal ID.
`okLabel`	String	`"Ok"`	Allows to change a text inside submit button.
`overflowHidden`	Boolean	`true`	Allows to disable/enable a overflow hidden to body if modal is shown.
`pickerID`	String	`""`	Allows to set Timepicker picker ID.
`readOnly`	Boolean	`false`	Allows to set readonly property to input inside wrapper.
`showClearBtn`	Boolean	`true`	Allows to attach/remove clear button in modal.
`switchHoursToMinutesOnClick`	Boolean	`true`	Allows to enable/disable switching to minutes if hours are selected.
`withIcon`	Boolean	`true`	Allows to enable/disable append a icon to input.
`iconSVG`	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>`	Allows to set custom icon.
`pmLabel`	String	`'PM'`	Allows to set custom text to PM button.
`amLabel`	String	`'AM'`	Allows to set custom text to AM button.

Classes

Custom classes can be passed via data attributes or JavaScript. For data attributes, append the class name to data-twe-class, as in data-twe-class-tips="".

Name	Default	Description
`tips`	absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] rounded-[100%] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent	Sets styles of Timepicker tips.
`tipsActive`	text-white bg-primary font-normal	Sets styles of Timepicker active tips.
`tipsDisabled`	text-surface/50 pointer-events-none bg-transparent dark:text-white/50	Sets styles of Timepicker disabled tips.
`transform`	transition-[transform,height] ease-in-out duration-[400ms]	Sets Timepicker animation styles.
`modal`	z-[1065]	Sets stack order od Timepicker modal element.
`clockAnimation`	animate-[show-up-clock_350ms_linear]	Sets Timepicker clock animation styles.
`opacity`	!opacity-100	Sets opacity of Timepicker active elements.
`timepickerWrapper`	touch-none opacity-100 z-[1065] inset-0 bg-black/40 h-full flex items-center justify-center flex-col fixed	Sets styles of Timepicker wrapper.
`timepickerContainer`	flex items-center justify-center flex-col max-h-[calc(100%-64px)] overflow-y-auto shadow-4 min-[320px]:max-[825px]:landscape:rounded-lg	Sets styles of Timepicker container.
`timepickerElements`	flex flex-col min-w-[310px] min-h-[325px] bg-white rounded-t-[0.6rem] min-[320px]:max-[825px]:landscape:!flex-row min-[320px]:max-[825px]:landscape:min-w-[auto] min-[320px]:max-[825px]:landscape:min-h-[auto] min-[320px]:max-[825px]:landscape:overflow-y-auto justify-around	Sets styles of Timepicker elements.
`timepickerHead`	bg-primary dark:bg-body-dark h-[100px] rounded-t-lg pe-[24px] ps-[50px] py-[10px] min-[320px]:max-[825px]:landscape:rounded-tr-none min-[320px]:max-[825px]:landscape:rounded-bl-none min-[320px]:max-[825px]:landscape:p-[10px] min-[320px]:max-[825px]:landscape:pe-[10px] min-[320px]:max-[825px]:landscape:h-auto min-[320px]:max-[825px]:landscape:min-h-[305px] flex flex-row items-center justify-center	Sets styles of Timepicker head.
`timepickerHeadContent`	min-[320px]:max-[825px]:landscape:flex-col flex w-full justify-evenly	Sets styles of Timepicker head content.
`timepickerCurrentWrapper`	[direction:ltr] rtl:[direction:rtl]	Sets direction properties of Timepicker current wrapper
`timepickerCurrentButtonWrapper`	relative h-full	Sets styles of Timepicker current button wrapper.
`timepickerCurrentButton`	text-[3.75rem] font-light leading-[1.2] tracking-[-0.00833em] text-white opacity-[.54] border-none bg-transparent p-0 min-[320px]:max-[825px]:landscape:text-5xl min-[320px]:max-[825px]:landscape:font-normal cursor-pointer hover:bg-black/20 hover:outline-none focus:bg-black/20 focus:outline-none dark:hover:bg-white/20 dark:focus:bg-white/20	Sets styles of Timepicker current button.
`timepickerDot`	font-light leading-[1.2] tracking-[-0.00833em] text-[3.75rem] opacity-[.54] border-none bg-transparent p-0 text-white min-[320px]:max-[825px]:landscape:text-[3rem] min-[320px]:max-[825px]:landscape:font-normal	Sets styles of Timepicker dot.
`timepickerModeWrapper`	flex flex-col justify-center text-[18px] text-[#ffffff8a] min-[320px]:max-[825px]:landscape:!justify-around min-[320px]:max-[825px]:landscape:!flex-row	Sets styles of Timepicker mode wrapper.
`timepickerModeAm`	p-0 bg-transparent border-none text-white opacity-[.54] cursor-pointer hover:bg-black/20 hover:outline-none focus:bg-black/20 focus:outline-none dark:hover:bg-white/20 dark:focus:bg-white/20	Sets styles of Timepicker AM button.
`timepickerModePm`	p-0 bg-transparent border-none text-white opacity-[.54] cursor-pointer hover:bg-black/20 hover:outline-none focus:bg-black/20 focus:outline-none dark:hover:bg-white/20 dark:focus:bg-white/20	Sets styles of Timepicker PM button.
`timepickerClockWrapper`	min-w-[310px] max-w-[325px] min-h-[305px] overflow-x-hidden h-full flex justify-center flex-col items-center dark:bg-surface-dark	Sets styles of Timepicker clock wrapper.
`timepickerClock`	relative rounded-[100%] w-[260px] h-[260px] cursor-default my-0 mx-auto bg-[#eee] dark:bg-[#616161]	Sets styles of Timepicker clock.
`timepickerMiddleDot`	top-1/2 left-1/2 w-[6px] h-[6px] -translate-y-1/2 -translate-x-1/2 rounded-[50%] bg-primary absolute	Sets styles of Timepicker middle dot.
`timepickerHandPointer`	bg-primary bottom-1/2 h-2/5 start-[calc(50%-1px)] rtl:!left-auto origin-[center_bottom_0] w-[2px] absolute	Sets styles of Timepicker hand pointer.
`timepickerPointerCircle`	-top-[21px] -left-[15px] w-[4px] border-[14px] border-solid border-primary h-[4px] box-content rounded-[100%] absolute	Sets styles of Timepicker pointer circle.
`timepickerClockInner`	absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 w-[160px] h-[160px] rounded-[100%]	Sets styles of Timepicker inner clock.
`timepickerFooterWrapper`	rounded-b-lg flex justify-between items-center w-full h-[56px] px-[12px] bg-white dark:bg-surface-dark	Sets styles of Timepicker footer wrapper.
`timepickerFooter`	w-full flex justify-between	Sets styles of Timepicker footer.
`timepickerFooterButton`	text-[0.8rem] min-w-[64px] box-border font-medium leading-[40px] rounded-[10px] tracking-[0.1rem] uppercase text-surface dark:text-white border-none bg-transparent transition-[background-color,box-shadow,border] duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)] delay-[0ms] outline-none py-0 px-[10px] h-[40px] mb-[10px] hover:bg-black/5 focus:bg-black/5 focus:outline-none dark:hover:bg-black/10 dark:focus:bg-black/10	Sets styles of Timepicker footer button.
`timepickerInlineWrapper`	touch-none opacity-100 z-[1065] inset-0 bg-black/40 h-full flex items-center justify-center flex-col rounded-lg	Sets styles of Timepicker Inline wrapper.
`timepickerInlineContainer`	flex items-center justify-center flex-col max-h-[calc(100%-64px)] overflow-y-auto shadow-4	Sets styles of Timepicker Inline container.
`timepickerInlineElements`	flex flex-col min-h-[auto] min-w-[310px] bg-white rounded-[0.6rem] min-[320px]:max-[825px]:landscape:!flex-row min-[320px]:max-[825px]:landscape:rounded-bl-lg min-[320px]:max-[825px]:landscape:min-w-[auto] min-[320px]:max-[825px]:landscape::min-h-[auto] min-[320px]:max-[825px]:landscape:overflow-y-auto justify-around	Sets styles of Timepicker Inline elements.
`timepickerInlineHead`	bg-primary dark:bg-surface-dark h-[100px] rounded-t-lg min-[320px]:max-[825px]:landscape:rounded-tr-none min-[320px]:max-[825px]:landscape:rounded-bl-none min-[320px]:max-[825px]:landscape:p-[10px] min-[320px]:max-[825px]:landscape:pe-[10px] min-[320px]:max-[825px]:landscape:h-auto min-[320px]:max-[825px]:landscape:min-h-[305px] flex flex-row items-center justify-center p-0 rounded-b-lg	Sets styles of Timepicker Inline head.
`timepickerInlineHeadContent`	min-[320px]:max-[825px]:landscape:flex-col flex w-full justify-evenly items-center	Sets styles of Timepicker Inline head content.
`timepickerInlineHourWrapper`	relative h-full !opacity-100	Sets styles of Timepicker Inline hour wrapper.
`timepickerCurrentMinuteWrapper`	relative h-full	Sets styles of Timepicker current minute wrapper.
`timepickerInlineIconUp`	absolute text-white -top-[35px] opacity-0 hover:opacity-100 transition-all duration-200 ease-[ease] cursor-pointer -translate-x-1/2 -translate-y-1/2 left-1/2 w-[30px] h-[30px] flex justify-center items-center	Sets styles of Timepicker Inline up icon.
`timepickerInlineIconSvg`	h-4 w-4	Sets styles of Timepicker Inline SVG icon.
`timepickerInlineCurrentButton`	font-light leading-[1.2] tracking-[-0.00833em] text-white border-none bg-transparent p-0 min-[320px]:max-[825px]:landscape:text-5xl min-[320px]:max-[825px]:landscape:font-normal !opacity-100 cursor-pointer focus:bg-black/20 hover:outline-none focus:outline-none text-[2.5rem] hover:bg-[unset] dark:focus:bg-white/20	Sets styles of Timepicker Inline current button.
`timepickerInlineIconDown`	absolute text-white -bottom-[47px] opacity-0 hover:opacity-100 transition-all duration-200 ease-[ease] cursor-pointer -translate-x-1/2 -translate-y-1/2 left-1/2 w-[30px] h-[30px] flex justify-center items-center	Sets styles of Timepicker Inline down icon.
`timepickerInlineDot`	font-light leading-[1.2] tracking-[-0.00833em] opacity-[.54] border-none bg-transparent p-0 text-white min-[320px]:max-[825px]:landscape:text-[3rem] min-[320px]:max-[825px]:landscape:font-normal text-[2.5rem]	Sets styles of Timepicker Inline dot.
`timepickerInlineModeWrapper`	flex justify-center text-[18px] text-[#ffffff8a] min-[320px]:max-[825px]:landscape:!justify-around min-[320px]:max-[825px]:landscape:!flex-row	Sets styles of Timepicker Inline mode wrapper.
`timepickerInlineModeAm`	hover:bg-black/20 hover:outline-none focus:bg-black/20 focus:outline-none p-0 bg-transparent border-none text-white opacity-[.54] cursor-pointer me-2 ms-6 dark:hover:bg-white/20 dark:focus:bg-white/20	Sets styles of Timepicker Inline AM button.
`timepickerInlineModePm`	hover:bg-black/20 hover:outline-none focus:bg-black/20 focus:outline-none p-0 bg-transparent border-none text-white opacity-[.54] cursor-pointer dark:hover:bg-white/20 dark:focus:bg-white/20	Sets styles of Timepicker Inline PM button.
`timepickerInlineSubmitButton`	hover:bg-black/10 focus:bg-black/10 focus:outline-none text-[0.8rem] box-border font-medium leading-[40px] tracking-[.1rem] uppercase border-none bg-transparent [transition:background-color_250ms_cubic-bezier(0.4,0,0.2,1)_0ms,box-shadow_250ms_cubic-bezier(0.4,0,0.2,1)_0ms,border_250ms_cubic-bezier(0.4,0,0.2,1)_0ms] outline-none rounded-[100%] h-[48px] min-w-[48px] inline-block ms-[30px] text-white py-1 px-2 mb-0 dark:hover:bg-white/10 dark:focus:bg-white/10	Sets styles of Timepicker Inline submit button.
`timepickerToggleButton`	h-4 w-4 ms-auto absolute outline-none border-none bg-transparent right-1.5 top-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] cursor-pointer hover:text-primary focus:text-primary dark:hover:text-primary dark:focus:text-primary dark:text-white	Sets styles of Timepicker toggle button.

Methods

Method	Description	Example
`dispose`	Destroy timepicker with this method	`myTimepicker.dispose()`
`getInstance`	Static method which allows you to get the alert instance associated to a DOM element.	`Timepicker.getInstance()`
`getOrCreateInstance`	Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialized.	`Timepicker.getOrCreateInstance()`
`update`	Updates options of a timepicker instance.	`Timepicker.update({inline: true})`

javascript
javascript

ES UMD

const myTimepickerEl = document.getElementById('myTimepicker');
const myTimepicker = new Timepicker(myTimepickerEl);
myTimepicker.dispose();

const myTimepickerEl = document.getElementById('myTimepicker');
const myTimepicker = new twe.Timepicker(myTimepickerEl);
myTimepicker.dispose();

Events

Event type	Description
`valueChanged.twe.timepicker`	This event fires when timepicker modal is approved and showing current elements with data-mdb-toggle. You can use it for taking a value when you are saving value to input.

JavaScript

const myTimepicker = document.getElementById('myTimepicker');
myTimepicker.addEventListener('valueChanged.twe.timepicker', (e) => {
  // do something...
});

Timepicker

Basic example

Inline Timepicker with 12h

Inline Timepicker with 24h

Custom Icon

With button

With icon

Without icon

Default time

Handle input value

Format 24h

Just Input

Increment

Max time

Max time with PM

Max time with AM

Min time

Min time with PM

Min time with AM

Disable past

Disable future

Accessibility

Timepicker - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Events

Access restricted

To view this section you must have an active PRO account

Timepicker

Tailwind CSS Timepicker

Basic example

Inline Timepicker with 12h

Inline Timepicker with 24h

Custom Icon

With button

With icon

Without icon

Default time

Handle input value

Format 24h

Just Input

Increment

Max time

Max time with PM

Max time with AM

Min time

Min time with PM

Min time with AM

Disable past

Disable future

Accessibility

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):

Timepicker - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Events