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.
<div class="relative" data-te-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 {
Input,
Timepicker,
initTE,
} from "tw-elements";
initTE({ Input, Timepicker });
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!
Inline Timepicker with 12h
TE Timepicker allows you to use an inline version of timepicker. Default version is with 12h.
<div
class="relative"
id="timepicker-inline-12"
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="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>
import {
Input,
Timepicker,
initTE,
} from "tw-elements";
initTE({ 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 te.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.
<div
class="relative"
id="timepicker-inline-24"
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="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>
import {
Input,
Timepicker,
initTE,
} from "tw-elements";
initTE({ 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 te.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-te-timepicker-toggle-button to your element with
data-te-toggle and data-te-timepicker-icon to your
icon.
With button
<div
class="relative"
id="timepicker-with-button"
data-te-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="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
>
<button
tabindex="0"
type="button"
class="timepicker-toggle-button absolute right-1.5 top-1/2 ml-auto h-4 w-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer border-none bg-transparent text-neutral-700 outline-none transition-all duration-[300ms] ease-[cubic-bezier(0.25,0.1,0.25,1)] hover:fill-[#3b71ca] focus:text-[#3b71ca] dark:text-white dark:hover:text-[#3b71ca] dark:focus:text-[#3b71ca]"
data-te-toggle="timepicker-with-button"
data-te-timepicker-toggle-button>
<span data-te-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,
initTE,
} from "tw-elements";
initTE({ Input, Timepicker });
With icon
<div
class="relative"
id="timepicker-with-icon"
data-te-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="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
>
<span
class="absolute right-1.5 top-1/2 ml-auto h-4 w-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer border-none bg-transparent text-neutral-700 outline-none transition-all duration-[300ms] ease-[cubic-bezier(0.25,0.1,0.25,1)] hover:text-[#3b71ca] focus:text-[#3b71ca] dark:text-white dark:hover:text-[#3b71ca] dark:focus:text-[#3b71ca]"
tabindex="0"
type="button"
role="button"
data-te-toggle="timepicker-with-icon"
data-te-timepicker-toggle-button
data-te-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,
initTE,
} from "tw-elements";
initTE({ Input, Timepicker });
Without icon
TE Timepicker allows to set input without icon. You can set this with
data-te-with-icon set to false or with options
withIcon set to false if you initialize timepicker
with js.
<div
class="relative"
id="timepicker-without-icon"
data-te-timepicker-init>
<div 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"
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>
<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-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-toggle="timepicker-without-icon"
data-te-ripple-init>
Toggle Timepicker
</button>
</div>
<div
class="relative mb-3 xl:w-96"
id="timepicker-without-icon-2"
data-te-with-icon="false">
<div 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"
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>
<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-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-toggle="timepicker-without-icon-2"
data-te-ripple-init>
Toggle Timepicker
</button>
</div>
import {
Input,
Timepicker,
initTE,
} from "tw-elements";
initTE({ 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 te.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-->
<div
class="relative"
id="timepicker-default-time-string-pm"
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="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-[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"
>With string PM</label
>
</div>
<!--With string AM-->
<div
class="relative"
id="timepicker-default-time-string-am"
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="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"
>With string AM</label
>
</div>
<!--With string without AM/PM-->
<div
class="relative"
id="timepicker-default-time-string-without-pm-am"
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="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"
>With string wighout AM/PM</label
>
</div>
<!--With string 24h-->
<div
class="relative"
id="timepicker-default-time-string-24h"
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="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-[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"
>With string 24h</label
>
</div>
<!--With new Date with 12h-->
<div
class="relative"
id="timepicker-default-time-with-new-date-12h"
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="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-[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"
>With new Date with 12h</label
>
</div>
<!--With new Date with 24h-->
<div
class="relative"
id="timepicker-default-time-with-new-date-24h"
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="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-[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"
>With new Date with 24h</label
>
</div>
import {
Input,
Timepicker,
initTE,
} from "tw-elements";
initTE({ 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 te.Timepicker(pickerStartedPM, {
defaultTime: "02:12 PM",
});
//Default time string AM
const pickerStartedAM = document.querySelector(
"#timepicker-default-time-string-am"
);
const tmStartedAM = new te.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 te.Timepicker(pickerStartedWithoutPmAm, {
defaultTime: "05:12",
});
//Default time with 24h
const pickerStartedWith24h = document.querySelector(
"#timepicker-default-time-string-24h"
);
const tmStartedWith24h = new te.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 te.Timepicker(pickerStartedWithDate12h, {
defaultTime: new Date(),
});
//Default time date 24h
const pickerStartedWithDate24h = document.querySelector(
"#timepicker-default-time-with-new-date-24h"
);
const tmStartedWithDate24h = new te.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.
Input value:
<div id="timepicker-value" 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"
data-te-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-[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>
<div class="my-2">Input value: <span id="span-input-value"></span></div>
import {
Input,
Timepicker,
initTE,
} from "tw-elements";
initTE({ Input });
const timepickerValue = document.querySelector("#timepicker-value");
const tminputValue = new Timepicker(timepickerValue);
timepickerValue.addEventListener("input.te.timepicker", (input) => {
const valueDiv = document.querySelector("#span-input-value");
valueDiv.innerText = input.target.value;
});
const timepickerValue = document.querySelector("#timepicker-value");
const tminputValue = new te.Timepicker(timepickerValue);
timepickerValue.addEventListener("input.te.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-te-format24 set to
true.
<div
class="relative"
data-te-format24="true"
id="timepicker-format"
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"
data-te-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-[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 {
Input,
Timepicker,
initTE,
} from "tw-elements";
initTE({ Input });
const picker = document.querySelector("#timepicker-format");
const tpFormat24 = new Timepicker(picker, {
format24: true,
});
const picker = document.querySelector("#timepicker-format");
const tpFormat24 = new te.Timepicker(picker, {
format24: true,
});
Just Input
You can set a timepicker to just an input.
<div
class="relative"
data-te-with-icon="false"
data-te-timepicker-init
data-te-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-[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"
data-te-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-[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 {
Input,
Timepicker,
initTE,
} from "tw-elements";
initTE({ Input, Timepicker });
Increment
You can set a increment value by 5 to a minutes.
<div class="relative" id="timepicker-inc" 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="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-[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 {
Input,
Timepicker,
initTE,
} from "tw-elements";
initTE({ Input });
const pickerInc = document.querySelector("#timepicker-inc");
const timepickerInc = new Timepicker(pickerInc, {
increment: true,
});
const pickerInc = document.querySelector("#timepicker-inc");
const timepickerInc = new te.Timepicker(pickerInc, {
increment: true,
});
Max time
You can set max time to picker with options.
<div class="relative" id="timepicker-max-time" 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="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-[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 {
Input,
Timepicker,
initTE,
} from "tw-elements";
initTE({ 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 te.Timepicker(pickerMaxTime, {
maxTime: "6:35",
});
Max time with PM
You can set max time to timepicker with options.
<div
class="relative"
id="timepicker-max-time-pm"
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="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-[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 {
Input,
Timepicker,
initTE,
} from "tw-elements";
initTE({ 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 te.Timepicker(pickerMaxTimePM, {
maxTime: "6:35 PM",
});
Max time with AM
You can set max time to timepicker with options.
<div
class="relative"
id="timepicker-max-time-am"
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="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-[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 {
Input,
Timepicker,
initTE,
} from "tw-elements";
initTE({ 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 te.Timepicker(pickerMaxTimeAM, {
maxTime: "6:35 AM",
});
Min time
You can set min time to timepicker with options.
<div class="relative" id="timepicker-min-time" 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="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-[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 {
Input,
Timepicker,
initTE,
} from "tw-elements";
initTE({ 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 te.Timepicker(pickerMinTime, {
minTime: "10:15",
});
Min time with PM
You can set min time to timepicker with options.
<div
class="relative"
id="timepicker-min-time-pm"
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="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-[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 {
Input,
Timepicker,
initTE,
} from "tw-elements";
initTE({ 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 te.Timepicker(pickerMinTimePM, {
minTime: "6:35 PM",
});
Min time with AM
You can set min time to timepicker with options.
<div
class="relative"
id="timepicker-min-time-am"
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="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-[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 {
Input,
Timepicker,
initTE,
} from "tw-elements";
initTE({ 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 te.Timepicker(pickerMinTimeAM, {
minTime: "6:35 AM",
});
Disable past
Use the disablePast option to disallow past time selection.
<div
class="relative"
id="timepicker-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"
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-[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 {
Input,
Timepicker,
initTE,
} from "tw-elements";
initTE({ 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 te.Timepicker(pickerDisablePast, {
disablePast: true,
});
Disable future
Use the disableFuture option to disallow future time selection.
<div
class="relative"
id="timepicker-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"
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-[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 {
Input,
Timepicker,
initTE,
} from "tw-elements";
initTE({ 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 te.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',
Related resources
Tutorials:
Extended Docs:
icons
offcanvas
scrollspy
button group
buttons
cards
modal
datepicker
inputs
search
select
border opacity
borders
center grid items
dark theme
display flex
icons
position
spacing