search results:

    • Standard
    • React
    License Free hosting Learn Services Community
    • + D
    • Light
    • Dark
    • System
    logo Tailwind Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Contribute
      • Internationalization guide
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Remix
      • Solid
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • ResourcesNew
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips
    • Overview
    • API

    Timepicker

    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.

    Required ES init: Timepicker, Input *
    * UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using Tailwind Elements ES format then you should pass the required components to the initTE method.

    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.
    • HTML
    • javascript
            
                
          <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 Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Share via Dev.to Share via Twitter Share via Facebook Share via Pinterest Share via Reddit Share via StumbleUpon Share via Vkontakte Share via Weibo Share via HackerNews Share via Gmail Share via Email

    Inline Timepicker with 12h

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

    • HTML
    • javascript
    • umd
            
                
          <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, Timepicker });
    
          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.

    • HTML
    • javascript
    • umd
            
                
          <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, Timepicker });
    
          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

    • HTML
    • javascript
            
                
            <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

    • HTML
    • javascript
            
                
            <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.

    • HTML
    • javascript
    • umd
            
                
          <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, Timepicker });
    
          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.
    • HTML
    • javascript
    • umd
            
                
          <!--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, Timepicker });
    
          //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:
    • HTML
    • javascript
    • umd
            
                
          <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, Timepicker });
    
          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.

    • HTML
    • javascript
    • umd
            
                
          <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, Timepicker });
    
          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.

    • HTML
    • javascript
            
                
          <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.

    • HTML
    • javascript
    • umd
            
                
          <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, Timepicker });
    
          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.

    • HTML
    • javascript
    • umd
            
                
          <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, Timepicker });
    
          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.

    • HTML
    • javascript
    • umd
            
                
          <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, Timepicker });
    
          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.

    • HTML
    • javascript
    • umd
            
                
          <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, Timepicker });
    
          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.

    • HTML
    • javascript
    • umd
            
                
          <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, Timepicker });
    
          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.

    • HTML
    • javascript
    • umd
            
                
          <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, Timepicker });
    
          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.

    • HTML
    • javascript
    • umd
            
                
          <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, Timepicker });
    
          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.

    • HTML
    • javascript
    • umd
            
                
          <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, Timepicker });
    
          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.

    • HTML
    • javascript
    • umd
            
                
          <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, Timepicker });
    
          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:

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

    Related resources

    Tutorials:

    focus active and others dark mode spacing utility first buttons rounded corners sizing inputs forms

    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

    Design System (Figma):

    introduction less is more art of prioritization de emphasize with no mercy size matters label overload lowering contrast beyond borders let it breathe user experience do not start with the roof secondary questions project personality design system principles tips and tricks
    • Basic example
    • Inline with 12h
    • Inline with 24h
    • Custom icon
    • Without icon
    • Default time
    • Handle input value
    • Format 24h
    • Just Input
    • Increment minutes
    • Max time
    • Max time PM
    • Max time AM
    • Min time
    • Min time PM
    • Min time AM
    • Disable past
    • Disable future
    • Accessibility
    • Related resources

    Timepicker - API


    Import

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

    • javascript
    • umd
            
                
            import { Timepicker, Input, initTE } from "tw-elements";
            initTE({ 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-te-timepicker-init attribute, or manually with JS.


    Via data attributes

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

    • HTML
            
                
            <div
              class="relative mb-3 xl:w-96"
              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-[2.15] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 [&: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-[2.15] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[1.15rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[1.15rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-neutral-200"
                >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
    • umd
            
                
            const myTimepicker = new Timepicker(document.getElementById('wrapper-id'), options);
            
            
        
            
                
            const myTimepicker = new te.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-te-, as in data-te-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-te-class, as in data-te-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-[#3b71ca] font-normal Sets styles of Timepicker active tips.
    tipsDisabled text-[#b3afaf] pointer-events-none bg-transparent 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-[#00000066] 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-[0_10px_15px_-3px_rgba(0,0,0,0.07),0_4px_6px_-2px_rgba(0,0,0,0.05)] 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-[#3b71ca] dark:bg-zinc-700 h-[100px] rounded-t-lg pr-[24px] pl-[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:pr-[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-[#00000026] hover:outline-none focus:bg-[#00000026] focus:outline-none 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-[#00000026] hover:outline-none focus:bg-[#00000026] focus:outline-none Sets styles of Timepicker AM button.
    timepickerModePm p-0 bg-transparent border-none text-white opacity-[.54] cursor-pointer hover:bg-[#00000026] hover:outline-none focus:bg-[#00000026] focus:outline-none 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-zinc-500 Sets styles of Timepicker clock wrapper.
    timepickerClock relative rounded-[100%] w-[260px] h-[260px] cursor-default my-0 mx-auto bg-[#00000012] dark:bg-zinc-600/50 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-[#3b71ca] absolute Sets styles of Timepicker middle dot.
    timepickerHandPointer bg-[#3b71ca] bottom-1/2 h-2/5 left-[calc(50%-1px)] rtl:!left-auto origin-[center_bottom_0] rtl:!origin-[50%_50%_0] w-[2px] absolute Sets styles of Timepicker hand pointer.
    timepickerPointerCircle -top-[21px] -left-[15px] w-[4px] border-[14px] border-solid border-[#3b71ca] 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-zinc-500 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-[#3b71ca] 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-[#00000014] focus:bg-[#00000014] focus:outline-none Sets styles of Timepicker footer button.
    timepickerInlineWrapper touch-none opacity-100 z-[1065] inset-0 bg-[#00000066] 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-[0_10px_15px_-3px_rgba(0,0,0,0.07),0_4px_6px_-2px_rgba(0,0,0,0.05)] 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-[#3b71ca] dark:bg-zinc-700 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:pr-[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-[#00000026] hover:outline-none focus:outline-none text-[2.5rem] hover:bg-[unset] 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-[#00000026] hover:outline-none focus:bg-[#00000026] focus:outline-none p-0 bg-transparent border-none text-white opacity-[.54] cursor-pointer mr-2 ml-6 Sets styles of Timepicker Inline AM button.
    timepickerInlineModePm hover:bg-[#00000026] hover:outline-none focus:bg-[#00000026] focus:outline-none p-0 bg-transparent border-none text-white opacity-[.54] cursor-pointer Sets styles of Timepicker Inline PM button.
    timepickerInlineSubmitButton hover:bg-[#00000014] focus:bg-[#00000014] 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 ml-[30px] text-white py-1 px-2 mb-0 Sets styles of Timepicker Inline submit button.
    timepickerToggleButton h-4 w-4 ml-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-[#3b71ca] focus:text-[#3b71ca] dark:hover:text-[#3b71ca] dark:focus:text-[#3b71ca] 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
    • umd
            
                
            const myTimepickerEl = document.getElementById('myTimepicker');
            const myTimepicker = new Timepicker(myTimepickerEl);
            myTimepicker.dispose();
            
            
        
            
                
            const myTimepickerEl = document.getElementById('myTimepicker');
            const myTimepicker = new te.Timepicker(myTimepickerEl);
            myTimepicker.dispose();
            
            
        

    Events

    Event type Description
    input.te.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('input.te.timepicker', (e) => {
              // do something...
            });
            
            
        
    • Import
    • Usage
    • Options
    • Classes
    • Methods
    • Events
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com