search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Migrating to v2
      • Internationalization guide
      • Class customization
      • Icons Integration
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Angular
      • ASP.NET
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • Qwik
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • 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
      • Autocomplete
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Multi range slider
      • 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
      • Admin Charts
      • Admin Complex
      • Admin Forms
      • Admin Maps
      • Admin Navigation
      • Admin tables
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Stats admin
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips
    • Overview
    • API

    Datetimepicker

    Tailwind CSS Datetimepicker

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

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

    Basic example

    Input with a modal for selecting a date and time.

    • HTML
    • javascript
            
                
          <div
            class="relative mb-3"
            data-twe-date-timepicker-init
            data-twe-input-wrapper-init>
            <input
              type="text"
              class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
              id="form1" />
            <label
              for="form1"
              class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
              >Select a time</label
            >
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Datetimepicker,
            Input,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Datetimepicker, Input });
          
            
        

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

    Inline version

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

    • HTML
    • javascript
            
                
          <div
            class="relative mb-3"
            data-twe-date-timepicker-init
            data-twe-input-wrapper-init
            data-twe-inline="true">
            <input
              type="text"
              class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
              id="form2" />
            <label
              for="form2"
              class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
              >Select a time</label
            >
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Datetimepicker,
            Input,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Datetimepicker, Input });
          
            
        

    Disabled

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

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

    • HTML
    • javascript
            
                
          <div
            class="relative mb-3"
            data-twe-date-timepicker-init
            data-twe-input-wrapper-init
            data-twe-disabled="true">
            <input
              type="text"
              class="peer block min-h-[auto] w-full rounded border-0 bg-neutral-200 px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:bg-neutral-600 dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
              id="form3"
              disabled />
            <label
              for="form3"
              class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
              >Select a time</label
            >
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Datetimepicker,
            Input,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Datetimepicker, Input });
          
            
        

    Disable past

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

    • HTML
    • javascript
            
                
          <div
            class="relative mb-3"
            data-twe-date-timepicker-init
            data-twe-input-wrapper-init
            data-twe-disable-past="true">
            <input
              type="text"
              class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
              id="form4" />
            <label
              for="form4"
              class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
              >Select a time</label
            >
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Datetimepicker,
            Input,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Datetimepicker, Input });
          
            
        

    Disable future

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

    • HTML
    • javascript
            
                
          <div
            class="relative mb-3"
            data-twe-date-timepicker-init
            data-twe-input-wrapper-init
            data-twe-disable-future="true">
            <input
              type="text"
              class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
              id="form5" />
            <label
              for="form5"
              class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
              >Select a time</label
            >
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Datetimepicker,
            Input,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Datetimepicker, Input });
          
            
        

    Default values

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

    • HTML
    • javascript
            
                
          <div
            class="relative mb-3"
            data-twe-date-timepicker-init
            data-twe-input-wrapper-init
            data-twe-default-date="22/01/2019"
            data-twe-default-time="10:33 PM">
            <input
              type="text"
              class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
              id="form6" />
            <label
              for="form6"
              class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
              >Select a time</label
            >
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Datetimepicker,
            Input,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Datetimepicker, Input });
          
            
        

    Input toggle

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

    • HTML
    • javascript
            
                
          <div
            class="relative mb-3"
            data-twe-date-timepicker-init
            data-twe-input-wrapper-init
            data-twe-toggle-button="false">
            <input
              type="text"
              class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
              id="form7"
              data-twe-date-timepicker-toggle-ref />
            <label
              for="form7"
              class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
              >Select a time</label
            >
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Datetimepicker,
            Input,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Datetimepicker, Input });
          
            
        

    Custom date and time options

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

    Datepicker options

    Note: This options works only with JS initialization.
    • HTML
    • javascript
    • umd
            
                
          <div
            class="relative mb-3"
            data-twe-input-wrapper-init
            id="datetimepicker-dateOptions">
            <input
              type="text"
              class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
              id="form8" />
            <label
              for="form8"
              class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
              >Select a time</label
            >
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Datetimepicker,
            Input,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Input });
    
          const pickerDateOptions = document.querySelector('#datetimepicker-dateOptions');
          new Datetimepicker(pickerDateOptions, {
            datepicker: { format: 'dd-mm-yyyy'},
          });
          
            
        
            
                
          const pickerDateOptions = document.querySelector('#datetimepicker-dateOptions');
          new twe.Datetimepicker(pickerDateOptions, {
            datepicker: { format: 'dd-mm-yyyy'},
          });
          
            
        

    Timepicker options

    Note: This options works only with JS initialization.
    • HTML
    • javascript
    • umd
            
                
          <div
            class="relative mb-3"
            data-twe-input-wrapper-init
            id="datetimepicker-timeOptions">
            <input
              type="text"
              class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
              id="form9" />
            <label
              for="form9"
              class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
              >Select a time</label
            >
          </div>
          
            
        
            
                
          import {
            Datetimepicker,
            Input,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Input });
    
          const pickerTimeOptions = document.querySelector('#datetimepicker-timeOptions');
          new Datetimepicker(pickerTimeOptions, {
            timepicker: { format24: true },
          });
          
            
        
            
                
          const pickerTimeOptions = document.querySelector('#datetimepicker-timeOptions');
          new twe.Datetimepicker(pickerTimeOptions, {
            timepicker: { format24: true },
          });
          
            
        

    Related resources

    Tutorials:

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

    Extended Docs:

    datepicker file input form templates input group login form registration form search select textarea timepicker border opacity borders center grid items dark theme display flex icons position spacing

    Generators and builders:

    Form drag & drop Typography SVG icon Instagram Filters button card table flexbox logo grid footer

    Design System (Figma):

    introduction art of prioritization de emphasize with no mercy 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 version
    • Disabled
    • Disable past
    • Disable future
    • Default
    • Input toggle
    • DateTime options
    • Datepicker
    • Timepicker
    • Related resources

    Datetimepicker - API


    Import

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

    • javascript
    • umd
            
                
            import { Datetimepicker, initTWE } from "tw-elements";
            initTWE({ Datetimepicker });
            
            
        
            
                
            import "tw-elements";
            
            
        

    Via data attributes

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

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

    Via JavaScript

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

    • javascript
    • umd
            
                
            const myDatetimepicker = new Datetimepicker(document.getElementById("myDatetimepicker"), options, classes);
            
            
        
            
                
            const myDatetimepicker = new twe.Datetimepicker(document.getElementById("myDatetimepicker"), options, classes);
            
            
        

    Options

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

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

    Classes

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

    Note: datepicker and timepicker options works only with JS initialization.
    Name Default Description
    buttonsContainer flex justify-evenly items-end bg-primary dark:bg-zinc-800 dark:data-[twe-buttons-timepicker]:bg-zinc-700 Sets classes for the container of toggle buttons in the header of timepicker and datepicker
    pickerIcon flex justify-evenly items-end bg-primary dark:bg-body-dark Sets classes for the toggle buttons of timepicker and datepicker
    toggleButton flex items-center justify-content-center [&>svg]:w-5 [&>svg]:h-5 absolute outline-none border-none bg-transparent right-0.5 top-1/2 -translate-x-1/2 -translate-y-1/2 hover:text-primary focus:text-primary dark:hover:text-primary dark:focus:text-primary dark:text-white Sets classes for the datetimepicker toggle button
    datepicker { } Can be used to add datepicker custom classes. Provide as an object. Use only with JS initialization.
    timepicker { } Can be used to add datepicker custom classes. Provide as an object. Use only with JS initialization.

    Methods

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

    Method Description Example
    update Updates options of a Datetimepicker instance. myDatetimepicker.update({inline: true})
    dispose Disposes a Datetimepicker instance myDatetimepicker.dispose()
    getInstance Static method which allows you to get the Datetimepicker instance associated to a DOM element. Datetimepicker.getInstance(datetimepickerEl)
    getOrCreateInstance Static method which returns the Datetimepicker instance associated to a DOM element or create a new one in case it wasn't initialized. Datetimepicker.getOrCreateInstance(datetimepickerEl)
    • javascript
    • umd
            
                
            const datetimepickerEl = document.getElementById('myDatetimepicker');
            const datetimepicker = new Datetimepicker(datetimepickerEl);
            datetimepicker.dispose();
            
            
        
            
                
            const datetimepickerEl = document.getElementById('myDatetimepicker');
            const datetimepicker = new twe.Datetimepicker(datetimepickerEl);
            datetimepicker.dispose();
            
            
        

    Events

    Event type Description
    open.twe.datetimepicker This event fires immediately when the datetimepicker is opened.
    close.twe.datetimepicker This event fires immediately when the datetimepicker is closed.
    valueChanged.twe.datetimepicker This event fires immediately when the new input value is set.
    • JavaScript
            
                
            const myDatetimepicker = document.getElementById('myDatetimepicker')
            myDatetimepicker.addEventListener('open.twe.datetimepicker', (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
    © 2024 Copyright: MDBootstrap.com

    Access restricted

    To view this section you must have an active PRO account

    Log in to your account or purchase an TWE subscription if you don't have one.

    Buy TWE PRO