Timepicker

Bootstrap 5 Timepicker component

Use MDB custom Timepicker component to select time.

Note: Read the API tab to find all available options and advanced customization

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

Basic example

MDB allows you to automatically initialize Timepicker when the page is loaded. To do that you need to add data-mdb-timepicker-init attribute in your picker wrapper.

Edit in sandbox 
        
            
          <div class="form-outline timepicker" data-mdb-timepicker-init data-mdb-input-init>
            <input type="text" class="form-control" id="form11" />
            <label class="form-label" for="form11">Select a time</label>
          </div>
        
        
    
        
            
          // Initialization for ES Users
          import { Input, Timepicker, initMDB } from "mdb-ui-kit";
          
          initMDB({ Input, Timepicker });

Inline Timepicker with 12h

MDB Timepicker allows for the use of an inline version of the timepicker. The default version is in 12-hour format.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-inline-12" data-mdb-input-init>
            <input type="text" class="form-control" id="form41" />
            <label class="form-label" for="form41">Select a time</label>
          </div>
        
        
    
        
            
        // Initialization for ES Users
          import { Input, Timepicker, initMDB } from "mdb-ui-kit";
          
          initMDB({ 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 mdb.Timepicker(pickerInline, {
            format12:true,
            inline: true
          });

Inline Timepicker with 24h

MDB Timepicker enables you to utilize an inline timepicker with a 24-hour format. To achieve this, set the format24 option to true.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-inline-24" data-mdb-input-init>
            <input type="text" class="form-control" id="form43" />
            <label class="form-label" for="form43">Select a time</label>
          </div>
        
        
    
        
            
          // Initialization for ES Users
          import { Input, Timepicker, initMDB } from "mdb-ui-kit";

          initMDB({ Input, Timepicker });

          const pickerInline = document.querySelector('.timepicker-inline-24');
          const timepickerMaxMin = new Timepicker(pickerInline, { 
            format24:true,
            inline: true
          });
        
        
    
        
            
          const pickerInline = document.querySelector('.timepicker-inline-24');
          const timepickerMaxMin = new mdb.Timepicker(pickerInline, { 
            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 class .timepicker-toggle-button to your element with data-mdb-toggle attribute and .timepicker-icon to your icon.

With button

Edit in sandbox 
        
            
            <div class="form-outline timepicker" data-mdb-timepicker-init data-mdb-input-init>
              <input type="text" class="form-control" id="form214" />
              <label class="form-label" for="form214">Select a time</label>
              <button tabindex="0" type="button" class="timepicker-toggle-button" data-mdb-toggle="timepicker">
                <i class="fab fa-react fa-2x timepicker-icon"></i>
              </button>
            </div>
          
        
    
        
            
            // Initialization for ES Users
            import { Input, Timepicker, initMDB } from "mdb-ui-kit";
            
            initMDB({ Input, Timepicker });

With icon

Edit in sandbox 
        
            
            <div class="form-outline timepicker" data-mdb-timepicker-init data-mdb-input-init>
              <input type="text" class="form-control" id="form2" />
              <label class="form-label" for="form2">Select a time</label>
              <i 
                class="fab fa-react fa-2x timepicker-icon timepicker-toggle-button"
                tabindex="0"
                type="button"
                role="button"
                data-mdb-toggle="timepicker"
              ></i>
            </div>
          
        
    
        
            
            // Initialization for ES Users
            import { Input, Timepicker, initMDB } from "mdb-ui-kit";

            initMDB({ Input, Timepicker });

Without icon

MDB Timepicker allows you to configure the input without an icon. You can achieve this by setting data-mdb-with-icon attribute to false or using the withIcon option with a value of false when initializing the timepicker with JavaScript

Edit in sandbox 
        
            
        <div class="timepicker" data-mdb-with-icon="false" data-mdb-timepicker-init>
          <div class="form-outline" data-mdb-input-init >
            <input type="text" class="form-control" id="form12" />
            <label class="form-label" for="form12">Select a time</label>
          </div>

          <button class="btn btn-primary mt-2" data-mdb-toggle="timepicker">
            Toggle Timepicker
          </button>
        </div>

        <div id="timepicker-without-icon" data-mdb-with-icon="false" class="mt-3">
          <div class="form-outline" data-mdb-input-init >
            <input type="text" class="form-control" id="form13" />
            <label class="form-label" for="form13">Select a time</label>
          </div>

          <button class="btn btn-primary mt-2" data-mdb-toggle="timepicker-without-icon">
            Toggle Timepicker
          </button>
        </div>
        
        
    
        
            
        // Initialization for ES Users
          import { Input, Timepicker, initMDB } from "mdb-ui-kit";

          initMDB({ Input, Timepicker });

          const wiTimepicker = document.querySelector('#timepicker-without-icon');
          const wiInitTimepicker = new Timepicker(wiTimepicker, {
            withIcon: false
          })
        
        
    
        
            
          const wiTimepicker = document.querySelector('#timepicker-without-icon');
            const wiInitTimepicker = new mdb.Timepicker(wiTimepicker, {
            withIcon: false
          });

Default time

MDB Timepicker allows you to initialize a default time in both the picker and input. You can set it using the defaultTime option, which 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.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-default-time-string-pm" data-mdb-input-init>
            <input type="text" class="form-control" id="form27" />
            <label class="form-label" for="form27">With string PM</label>
          </div>

          <div class="form-outline timepicker-default-time-string-am" data-mdb-input-init>
            <input type="text" class="form-control" id="form28" />
            <label class="form-label" for="form28">With string AM</label>
          </div>

          <div class="form-outline timepicker-default-time-string-without-pm-am" data-mdb-input-init>
            <input type="text" class="form-control" id="form29" />
            <label class="form-label" for="form29">With string without AM/PM</label>
          </div>

          <div class="form-outline timepicker-default-time-string-24h" data-mdb-input-init>
            <input type="text" class="form-control" id="form210" />
            <label class="form-label" for="form210">With string 24h</label>
          </div>

          <div class="form-outline timepicker-default-time-with-new-date-12h" data-mdb-input-init>
            <input type="text" class="form-control" id="form211" />
            <label class="form-label" for="form211">With new Date with 12h</label>
          </div>

          <div class="form-outline timepicker-default-time-with-new-date-24h" data-mdb-input-init>
            <input type="text" class="form-control" id="form212" />
            <label class="form-label" for="form212">With new Date with 24h</label>
          </div>
        
        
    
        
            
          // Initialization for ES Users
          import { Input, Timepicker, initMDB } from "mdb-ui-kit";

          initMDB({ 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 mdb.Timepicker(pickerStartedPM, {
            defaultTime: '02:12 PM'
          });

          //Default time string AM
          const pickerStartedAM = document.querySelector('.timepicker-default-time-string-am');
          const tmStartedAM = new mdb.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 mdb.Timepicker(pickerStartedWithoutPmAm, {
            defaultTime: '05:12',
          });

          //Default time with 24h
          const pickerStartedWith24h = document.querySelector('.timepicker-default-time-string-24h');
          const tmStartedWith24h = new mdb.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 mdb.Timepicker(pickerStartedWithDate12h, {
            defaultTime: new Date(),
          });

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

Handle input value

If you want handle input value upon modal approve, you have to add a listener for the custom event to the selected picker.

Input value:
Edit in sandbox 
        
            
          <div class="form-outline" id="timepicker-value" data-mdb-input-init>
            <input type="text" class="form-control" data-mdb-timepicker-format24="true" />
            <label class="form-label" for="form3">Select a time</label>
          </div>

          <div class="my-2">Input value: <span id="span-input-value"></span></div>
        
        
    
        
            
          // Initialization for ES Users
          import { Input, Timepicker, initMDB } from "mdb-ui-kit";

          initMDB({ Input, Timepicker });

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

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

            valueDiv.innerText = input.target.value;
          });
        
        
    
        
            
          const timepickerValue = document.querySelector('#timepicker-value');
          const tminputValue = new mdb.Timepicker(timepickerValue);

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

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

Format 24h

The Timepicker allows you to use the 24-hour time format. You can set it using JavaScript options or by using data-mdb-format24 and setting it to true.

Edit in sandbox 
        
            
          <div class="form-outline timepicker" data-mdb-timepicker-init data-mdb-input-init data-mdb-format24="true">
            <input type="text" class="form-control" data-mdb-toggle="timepicker" />
            <label class="form-label" for="form3">Select a time</label>
          </div>
        
        
    
        
            
          // Initialization for ES Users
          import { Input, Timepicker, initMDB } from "mdb-ui-kit";
          
          initMDB({ Input, Timepicker });

Just Input

You can set the Timepicker to open on input click.

Edit in sandbox 
        
            
          <div class="form-outline timepicker" data-mdb-timepicker-init data-mdb-with-icon="false" data-mdb-input-init>
            <input type="text" class="form-control" id="form22" data-mdb-toggle="timepicker" />
            <label class="form-label" for="form22">Select a time</label>
          </div>
        
        
    
        
            
          // Initialization for ES Users
          import { Input, Timepicker, initMDB } from "mdb-ui-kit";
          
          initMDB({ Input, Timepicker });

Increment

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

Edit in sandbox 
        
            
          <div class="form-outline timepicker-inc" data-mdb-input-init>
            <input type="text" class="form-control" id="form45" />
            <label class="form-label" for="form45">Select a time</label>
          </div>
        
        
    
        
            
          // Initialization for ES Users
          import { Input, Timepicker, initMDB } from "mdb-ui-kit";
          
          initMDB({ Input, Timepicker });

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

Max time

Use the max option to restrict the selection of time beyond the chosen hour.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-max-time" data-mdb-input-init>
            <input type="text" class="form-control" id="form46" />
            <label class="form-label" for="form46">Select a time</label>
          </div>
        
        
    
        
            
          // Initialization for ES Users
          import { Input, Timepicker, initMDB } from "mdb-ui-kit";

          initMDB({ 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 mdb.Timepicker(pickerMaxTime, {
            maxTime: '6:35'
          });

Max time with PM

Use the max option to restrict the selection of time beyond the chosen hour.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-max-time-pm" data-mdb-input-init>
            <input type="text" class="form-control" id="form48" />
            <label class="form-label" for="form48">Select a time</label>
          </div>
        
        
    
        
            
          // Initialization for ES Users
          import { Input, Timepicker, initMDB } from "mdb-ui-kit";
          
          initMDB({ 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 mdb.Timepicker(pickerMaxTimePM, {
            maxTime: '6:35 PM'
          });

Max time with AM

Use the max option to restrict the selection of time beyond the chosen hour.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-max-time-am" data-mdb-input-init>
            <input type="text" class="form-control" id="form410" />
            <label class="form-label" for="form410">Select a time</label>
          </div>
        
        
    
        
            
          // Initialization for ES Users
          import { Input, Timepicker, initMDB } from "mdb-ui-kit";

          initMDB({ 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 mdb.Timepicker(pickerMaxTimeAM, {
            maxTime: '6:35 AM'
          });

Min time

Use the max option to restrict the selection of time before the chosen hour.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-min-time" data-mdb-input-init>
            <input type="text" class="form-control" id="form412" />
            <label class="form-label" for="form412">Select a time</label>
          </div>
        
        
    
        
            
          // Initialization for ES Users
          import { Input, Timepicker, initMDB } from "mdb-ui-kit";

          initMDB({ 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 mdb.Timepicker(pickerMinTime, {
            minTime: '10:15'
          });

Min time with PM

Use the max option to restrict the selection of time before the chosen hour.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-min-time-pm" data-mdb-input-init>
            <input type="text" class="form-control" id="form414" />
            <label class="form-label" for="form414">Select a time</label>
          </div>

        
        
    
        
            
          // Initialization for ES Users
          import { Input, Timepicker, initMDB } from "mdb-ui-kit";

          initMDB({ 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 mdb.Timepicker(pickerMinTimePM, {
            minTime: '6:35 PM'
          });

Min time with AM

Use the max option to restrict the selection of time before the chosen hour.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-min-time-am" style="width:22rem" data-mdb-input-init>
            <input type="text" class="form-control" id="form416" />
            <label class="form-label" for="form416">Select a time</label>
          </div>
        
        
    
        
            
          // Initialization for ES Users
          import { Input, Timepicker, initMDB } from "mdb-ui-kit";

          initMDB({ 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 mdb.Timepicker(pickerMinTimeAM, {
            minTime: '6:35 AM'
          });

Disable past

Use the disablePast option to restrict the selection of time that has already passed.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-disable-past" data-mdb-input-init>
            <input type="text" class="form-control" id="form4" />
            <label class="form-label" for="form4">Select a time</label>
          </div>
        
        
    
        
            
          // Initialization for ES Users
          import { Input, Timepicker, initMDB } from "mdb-ui-kit";

          initMDB({ 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 mdb.Timepicker(pickerDisablePast, {
            disablePast: true
          });

Disable future

Use the disableFuture option to restrict the selection of times in the future.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-disable-future" data-mdb-input-init>
            <input type="text" class="form-control" id="form5" />
            <label class="form-label" for="form5">Select a time</label>
          </div>

        
        
    
        
            
          // Initialization for ES Users
          import { Input, Timepicker, initMDB } from "mdb-ui-kit";

          initMDB({ 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 mdb.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:

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

Timepicker - API

Import

Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must first import the component and then initialize it with the initMDB method. If you are going to use the UMD format, just import the mdb-ui-kit package.

Edit in sandbox 
        
            
          import { Timepicker, initMDB } from "mdb-ui-kit";
          initMDB({ Timepicker });
        
        
    
        
            
          import "mdb-ui-kit"

Usage

Via data attributes

Using the Timepicker component doesn't require any additional JavaScript code - simply add data-mdb-timepicker-init attribute to .form-outline and use other data attributes to set all options. For ES format, you must first import and call the initMDB method.

Edit in sandbox 
        
            
        <div class="form-outline timepicker" data-mdb-timepicker-init data-mdb-input-init>
          <input type="text" class="form-control" id="form1" />
          <label class="form-label" for="form1">Example label</label>
        </div>

Via JavaScript

Edit in sandbox 
        
            
        const myTimepicker = new Timepicker(document.getElementById('wrapper-id'), options)
        
        
    
        
            
        const myTimepicker = new mdb.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-mdb-, as in data-mdb-body-id="".

Name Type Default Description
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 false

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
footerId String 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
iconClass String 'fas fas fa-clock fa-sm timepicker-icon'

Allows to set custom classes to timepicker icon
pmLabel String 'PM'

Allows to set custom text to PM button
amLabel String 'AM'

Allows to set custom text to AM button

Methods

Name Description Example
dispose Destroy timepicker with this method myTimepicker.dispose()
getInstance Static method which allows you to get the timepicker instance associated to a DOM element. Timepicker.getInstance(myTimepicker)
getOrCreateInstance Static method which returns the timepicker instance associated to a DOM element or create a new one in case it wasn't initialized. Timepicker.getOrCreateInstance(myTimepicker)
update Updates options of a timepicker instance. Timepicker.update({inline: true})
Edit in sandbox 
        
            
            const timepickerEl = document.getElementById('myTimepicker')
            const timepicker = new Timepicker(timepickerEl)
            timepicker.dispose();
          
        
    
        
            
            const timepickerEl = document.getElementById('myTimepicker')
            const timepicker = new mdb.Timepicker(timepickerEl)
            timepicker.dispose();

Events

Name Description
clear.mdb.timepicker This event fires when the clear button is clicked.
valueChanged.mdb.timepicker This event fires immediately when the new input value is set.
Edit in sandbox 
        
            
            const myTimepicker = document.getElementById('myTimepicker')
            myTimepicker.addEventListener('valueChanged.mdb.timepicker', (e) => {
              // do something...
            })

CSS variables

As part of MDB’s evolving CSS variables approach, timepicker now use local CSS variables for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Timepicker CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables.

Edit in sandbox 
        
            
        // .timepicker
        // &-wrapper
        --#{$prefix}timepicker-wrapper-bg: #{$timepicker-wrapper-bg};
        --#{$prefix}timepicker-elements-min-width: #{$timepicker-elements-min-width};
        --#{$prefix}timepicker-elements-min-height: #{$timepicker-elements-min-height};
        --#{$prefix}timepicker-elements-background: #{$timepicker-elements-background};
        --#{$prefix}timepicker-elements-border-top-right-radius: #{$timepicker-elements-border-top-right-radius};
        --#{$prefix}timepicker-elements-border-top-left-radius: #{$timepicker-elements-border-top-left-radius};
        --#{$prefix}timepicker-elements-media-border-bottom-left-radius: #{$timepicker-elements-media-border-bottom-left-radius};
        --#{$prefix}timepicker-head-bg: #{$timepicker-head-bg};
        --#{$prefix}timepicker-head-height: #{$timepicker-head-height};
        --#{$prefix}timepicker-head-border-top-right-radius: #{$timepicker-head-border-top-right-radius};
        --#{$prefix}timepicker-head-border-top-left-radius: #{$timepicker-head-border-top-left-radius};
        --#{$prefix}timepicker-head-padding-y: #{$timepicker-head-padding-y};
        --#{$prefix}timepicker-head-padding-right: #{$timepicker-head-padding-right};
        --#{$prefix}timepicker-head-padding-left: #{$timepicker-head-padding-left};
        --#{$prefix}timepicker-head-media-padding: #{$timepicker-head-media-padding};
        --#{$prefix}timepicker-head-media-padding-right: #{$timepicker-head-media-padding-right};
        --#{$prefix}timepicker-head-media-min-height: #{$timepicker-head-media-min-height};
        --#{$prefix}timepicker-head-inline-border-bottom-right-radius: #{$timepicker-head-inline-border-bottom-right-radius};
        --#{$prefix}timepicker-head-inline-border-bottom-left-radius: #{$timepicker-head-inline-border-bottom-left-radius};
        --#{$prefix}timepicker-button-font-size: #{$timepicker-button-font-size};
        --#{$prefix}timepicker-button-min-width: #{$timepicker-button-min-width};
        --#{$prefix}timepicker-button-font-weight: #{$timepicker-button-font-weight};
        --#{$prefix}timepicker-button-line-height: #{$timepicker-button-line-height};
        --#{$prefix}timepicker-button-border-radius: #{$timepicker-button-border-radius};
        --#{$prefix}timepicker-button-letter-spacing: #{$timepicker-button-letter-spacing};
        --#{$prefix}timepicker-button-color: #{$timepicker-button-color};
        --#{$prefix}timepicker-button-transition: #{$timepicker-button-transition};
        --#{$prefix}timepicker-button-padding-x: #{$timepicker-button-padding-x};
        --#{$prefix}timepicker-button-height: #{$timepicker-button-height};
        --#{$prefix}timepicker-button-margin-bottom: #{$timepicker-button-margin-bottom};
        --#{$prefix}timepicker-button-hover-bg: #{$timepicker-button-hover-bg};
        --#{$prefix}timepicker-button-focus-bg: #{$timepicker-button-focus-bg};
        --#{$prefix}timepicker-submit-inline-height: #{$timepicker-submit-inline-height};
        --#{$prefix}timepicker-submit-inline-min-width: #{$timepicker-submit-inline-min-width};
        --#{$prefix}timepicker-submit-inline-margin-left: #{$timepicker-submit-inline-margin-left};
        --#{$prefix}timepicker-submit-inline-color: #{$timepicker-submit-inline-color};
        --#{$prefix}timepicker-current-font-size: #{$timepicker-current-font-size};
        --#{$prefix}timepicker-current-font-weight: #{$timepicker-current-font-weight};
        --#{$prefix}timepicker-current-line-height: #{$timepicker-current-line-height};
        --#{$prefix}timepicker-current-letter-spacing: #{$timepicker-current-letter-spacing};
        --#{$prefix}timepicker-current-color: #{$timepicker-current-color};
        --#{$prefix}timepicker-current-opacity: #{$timepicker-current-opacity};
        --#{$prefix}timepicker-clock-wrapper-min-width: #{$timepicker-clock-wrapper-min-width};
        --#{$prefix}timepicker-clock-wrapper-max-width: #{$timepicker-clock-wrapper-max-width};
        --#{$prefix}timepicker-clock-wrapper-min-height: #{$timepicker-clock-wrapper-min-height};
        --#{$prefix}timepicker-clock-wrapper-text-color: #{$timepicker-clock-wrapper-text-color};
        --#{$prefix}timepicker-mode-wrapper-font-size: #{$timepicker-mode-wrapper-font-size};
        --#{$prefix}timepicker-mode-wrapper-color: #{$timepicker-mode-wrapper-color};
        --#{$prefix}timepicker-clock-inner-top: #{$timepicker-clock-inner-top};
        --#{$prefix}timepicker-clock-inner-left: #{$timepicker-clock-inner-left};
        --#{$prefix}timepicker-clock-inner-transform: #{$timepicker-clock-inner-transform};
        --#{$prefix}timepicker-clock-inner-width: #{$timepicker-clock-inner-width};
        --#{$prefix}timepicker-clock-inner-height: #{$timepicker-clock-inner-height};
        --#{$prefix}timepicker-time-tips-inner-width: #{$timepicker-time-tips-inner-width};
        --#{$prefix}timepicker-time-tips-inner-height: #{$timepicker-time-tips-inner-height};
        --#{$prefix}timepicker-time-tips-inner-font-size: #{$timepicker-time-tips-inner-font-size};
        --#{$prefix}timepicker-time-tips-inner-font-weight: #{$timepicker-time-tips-inner-font-weight};
        --#{$prefix}timepicker-clock-width: #{$timepicker-clock-width};
        --#{$prefix}timepicker-clock-height: #{$timepicker-clock-height};
        --#{$prefix}timepicker-clock-bg: #{$timepicker-clock-bg};
        --#{$prefix}timepicker-time-tips-inner-active-color: #{$timepicker-time-tips-inner-active-color};
        --#{$prefix}timepicker-time-tips-inner-active-bg: #{$timepicker-time-tips-inner-active-bg};
        --#{$prefix}timepicker-time-tips-inner-active-font-weight: #{$timepicker-time-tips-inner-active-font-weight};
        --#{$prefix}timepicker-time-tips-inner-disabled-color: #{$timepicker-time-tips-inner-disabled-color};
        --#{$prefix}timepicker-dot-font-weight: #{$timepicker-dot-font-weight};
        --#{$prefix}timepicker-dot-line-height: #{$timepicker-dot-line-height};
        --#{$prefix}timepicker-dot-letter-spacing: #{$timepicker-dot-letter-spacing};
        --#{$prefix}timepicker-dot-color: #{$timepicker-dot-color};
        --#{$prefix}timepicker-dot-media-font-size: #{$timepicker-dot-media-font-size};
        --#{$prefix}timepicker-dot-media-font-weight: #{$timepicker-dot-media-font-weight};
        --#{$prefix}timepicker-dot-font-size: #{$timepicker-dot-font-size};
        --#{$prefix}timepicker-dot-opacity: #{$timepicker-dot-opacity};
        --#{$prefix}timepicker-current-inline-font-size: #{$timepicker-current-inline-font-size};
        --#{$prefix}timepicker-item-width: #{$timepicker-item-width};
        --#{$prefix}timepicker-item-height: #{$timepicker-item-height};
        --#{$prefix}timepicker-item-padding: #{$timepicker-item-padding};
        --#{$prefix}timepicker-item-font-size: #{$timepicker-item-font-size};
        --#{$prefix}timepicker-item-middle-dot-top: #{$timepicker-item-middle-dot-top};
        --#{$prefix}timepicker-item-middle-dot-left: #{$timepicker-item-middle-dot-left};
        --#{$prefix}timepicker-item-middle-dot-width: #{$timepicker-item-middle-dot-width};
        --#{$prefix}timepicker-item-middle-dot-height: #{$timepicker-item-middle-dot-height};
        --#{$prefix}timepicker-item-middle-dot-transform: #{$timepicker-item-middle-dot-transform};
        --#{$prefix}timepicker-item-middle-dot-border-radius: #{$timepicker-item-middle-dot-border-radius};
        --#{$prefix}timepicker-item-middle-dot-bg: #{$timepicker-item-middle-dot-bg};
        --#{$prefix}timepicker-hand-pointer-bg: #{$timepicker-hand-pointer-bg};
        --#{$prefix}timepicker-hand-pointer-bottom: #{$timepicker-hand-pointer-bottom};
        --#{$prefix}timepicker-hand-pointer-height: #{$timepicker-hand-pointer-height};
        --#{$prefix}timepicker-hand-pointer-left: #{$timepicker-hand-pointer-left};
        --#{$prefix}timepicker-hand-pointer-width: #{$timepicker-hand-pointer-width};
        --#{$prefix}timepicker-transform-transition: #{$timepicker-transform-transition};
        --#{$prefix}timepicker-time-tips-width: #{$timepicker-time-tips-width};
        --#{$prefix}timepicker-time-tips-height: #{$timepicker-time-tips-height};
        --#{$prefix}timepicker-time-tips-height: #{$timepicker-time-tips-height};
        --#{$prefix}timepicker-time-tips-font-size: #{$timepicker-time-tips-font-size};
        --#{$prefix}timepicker-time-tips-active-color: #{$timepicker-time-tips-active-color};
        --#{$prefix}timepicker-circle-top: #{$timepicker-circle-top};
        --#{$prefix}timepicker-circle-left: #{$timepicker-circle-left};
        --#{$prefix}timepicker-circle-width: #{$timepicker-circle-width};
        --#{$prefix}timepicker-circle-border-width: #{$timepicker-circle-border-width};
        --#{$prefix}timepicker-circle-border-color: #{$timepicker-circle-border-color};
        --#{$prefix}timepicker-circle-height: #{$timepicker-circle-height};
        --#{$prefix}timepicker-circle-active-background-color: #{$timepicker-circle-active-background-color};
        --#{$prefix}timepicker-hour-mode-color: #{$timepicker-hour-mode-color};
        --#{$prefix}timepicker-hour-mode-opacity: #{$timepicker-hour-mode-opacity};
        --#{$prefix}timepicker-hour-mode-hover-bg: #{$timepicker-hour-mode-hover-bg};
        --#{$prefix}timepicker-hour-mode-font-size: #{$timepicker-hour-mode-font-size};
        --#{$prefix}timepicker-hour-mode-active-color: #{$timepicker-hour-mode-active-color};
        --#{$prefix}timepicker-footer-border-bottom-left-radius: #{$timepicker-footer-border-bottom-left-radius};
        --#{$prefix}timepicker-footer-border-bottom-right-radius: #{$timepicker-footer-border-bottom-right-radius};
        --#{$prefix}timepicker-footer-height: #{$timepicker-footer-height};
        --#{$prefix}timepicker-footer-padding-x: #{$timepicker-footer-padding-x};
        --#{$prefix}timepicker-footer-bg: #{$timepicker-footer-bg};
        --#{$prefix}timepicker-container-max-height: #{$timepicker-container-max-height};
        --#{$prefix}timepicker-container-box-shadow: #{$box-shadow-4};
        --#{$prefix}timepicker-icon-up-down-transition: #{$timepicker-icon-up-down-transition};
        --#{$prefix}timepicker-icon-up-down-transform: #{$timepicker-icon-up-down-transform};
        --#{$prefix}timepicker-icon-up-down-left: #{$timepicker-icon-up-down-left};
        --#{$prefix}timepicker-icon-up-down-width: #{$timepicker-icon-up-down-width};
        --#{$prefix}timepicker-icon-up-down-height: #{$timepicker-icon-up-down-height};
        --#{$prefix}timepicker-icon-up-top: #{$timepicker-icon-up-top};
        --#{$prefix}timepicker-icon-down-bottom: #{$timepicker-icon-down-bottom};
        --#{$prefix}timepicker-icon-btn-width: #{$timepicker-icon-btn-width};
        --#{$prefix}timepicker-icon-btn-height: #{$timepicker-icon-btn-height};
        --#{$prefix}timepicker-input-color: #{$timepicker-input-color};
        --#{$prefix}timepicker-clock-animation: #{$timepicker-clock-animation};

        // &-wrapper-inline
        --#{$prefix}timepicker-wrapper-inline-border-radius: #{$timepicker-wrapper-inline-border-radius};
      
        // @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape)
        --#{$prefix}timepicker-elements-media-border-bottom-left-radius
          
        // &-toggle-button
        --#{$prefix}timepicker-btn-icon-right: #{$timepicker-btn-icon-right};
        --#{$prefix}timepicker-btn-icon-top: #{$timepicker-btn-icon-top};
        --#{$prefix}timepicker-btn-icon-transform: #{$timepicker-btn-icon-transform};
        --#{$prefix}timepicker-btn-icon-transition: #{$timepicker-btn-icon-transition};
        --#{$prefix}timepicker-btn-icon-hover-color: #{$timepicker-btn-icon-hover-color};
        --#{$prefix}timepicker-btn-icon-focus-color: #{$timepicker-btn-icon-focus-color};
    
        // .timepicker-modal
        --#{$prefix}timepicker-zindex: #{$timepicker-zindex};

SCSS variables

Edit in sandbox 
        
            
        $timepicker-zindex: 1065;

        $timepicker-wrapper-bg: rgba(0, 0, 0, 0.4);

        $timepicker-wrapper-inline-border-radius: 0.5rem;

        $timepicker-elements-min-width: 310px;
        $timepicker-elements-min-height: 325px;
        $timepicker-elements-background: var(--#{$prefix}surface-bg);
        $timepicker-elements-border-top-right-radius: 0.6rem;
        $timepicker-elements-border-top-left-radius: 0.6rem;
        $timepicker-elements-media-border-bottom-left-radius: 0;

        $timepicker-head-bg: var(--#{$prefix}picker-header-bg);
        $timepicker-head-height: 100px;
        $timepicker-head-border-top-right-radius: 0.5rem;
        $timepicker-head-border-top-left-radius: 0.5rem;
        $timepicker-head-padding-y: 10px;
        $timepicker-head-padding-right: 24px;
        $timepicker-head-padding-left: 50px;

        $timepicker-head-media-padding: 10px;
        $timepicker-head-media-padding-right: 10px;
        $timepicker-head-media-min-height: 305px;
        $timepicker-head-inline-border-bottom-right-radius: 0.5rem;
        $timepicker-head-inline-border-bottom-left-radius: 0.5rem;

        $timepicker-button-font-size: 0.8rem;
        $timepicker-button-min-width: 64px;
        $timepicker-button-font-weight: 500;
        $timepicker-button-line-height: 40px;
        $timepicker-button-border-radius: 10px;
        $timepicker-button-letter-spacing: 0.1rem;
        $timepicker-button-color: var(--#{$prefix}surface-color);
        $timepicker-button-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;
        $timepicker-button-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), 0.08);
        $timepicker-button-focus-bg: $timepicker-button-hover-bg;
        $timepicker-button-padding-x: 10px;
        $timepicker-button-height: 40px;
        $timepicker-button-margin-bottom: 10px;

        $timepicker-submit-inline-height: 48px;
        $timepicker-submit-inline-min-width: 48px;
        $timepicker-submit-inline-margin-left: 30px;
        $timepicker-submit-inline-color: $white;

        $timepicker-current-font-size: 3.75rem;
        $timepicker-current-font-weight: 300;
        $timepicker-current-line-height: 1.2;
        $timepicker-current-letter-spacing: -0.00833em;
        $timepicker-current-color: color-contrast($primary);
        $timepicker-current-opacity: 0.54;

        $timepicker-mode-wrapper-font-size: 18px;
        $timepicker-mode-wrapper-color: rgba(255, 255, 255, 0.54);

        $timepicker-clock-wrapper-min-width: 310px;
        $timepicker-clock-wrapper-max-width: 325px;
        $timepicker-clock-wrapper-min-height: 305px;
        $timepicker-clock-wrapper-text-color: var(--#{$prefix}surface-color);

        $timepicker-clock-animation: show-up-clock 350ms linear;
        $timepicker-clock-width: 260px;
        $timepicker-clock-height: 260px;
        $timepicker-clock-bg: var(--#{$prefix}timepicker-clock-face-bg);

        $timepicker-clock-inner-top: 50%;
        $timepicker-clock-inner-left: 50%;
        $timepicker-clock-inner-transform: translate(-50%, -50%);
        $timepicker-clock-inner-width: 160px;
        $timepicker-clock-inner-height: 160px;

        $timepicker-time-tips-inner-width: 32px;
        $timepicker-time-tips-inner-height: 32px;
        $timepicker-time-tips-inner-font-size: 1.1rem;
        $timepicker-time-tips-inner-font-weight: 300;
        $timepicker-time-tips-inner-active-color: color-contrast($primary);
        $timepicker-time-tips-inner-active-bg: $primary;
        $timepicker-time-tips-inner-active-font-weight: 400;
        $timepicker-time-tips-inner-disabled-color: rgba(var(--#{$prefix}surface-color-rgb), 0.5);

        $timepicker-dot-font-weight: 300;
        $timepicker-dot-line-height: 1.2;
        $timepicker-dot-letter-spacing: -0.00833em;
        $timepicker-dot-color: color-contrast($primary);
        $timepicker-dot-font-size: 3.75rem;
        $timepicker-dot-opacity: 0.54;
        $timepicker-dot-media-font-size: 3rem;
        $timepicker-dot-media-font-weight: 400;

        $timepicker-current-inline-font-size: 2.5rem;

        $timepicker-item-width: 20px;
        $timepicker-item-height: 20px;
        $timepicker-item-padding: 10px;
        $timepicker-item-font-size: 1.1em;

        $timepicker-item-middle-dot-top: 50%;
        $timepicker-item-middle-dot-left: 50%;
        $timepicker-item-middle-dot-width: 6px;
        $timepicker-item-middle-dot-height: $timepicker-item-middle-dot-width;
        $timepicker-item-middle-dot-transform: translate(-50%, -50%);
        $timepicker-item-middle-dot-border-radius: 50%;
        $timepicker-item-middle-dot-bg: $primary;

        $timepicker-hand-pointer-bg: $primary;
        $timepicker-hand-pointer-bottom: 50%;
        $timepicker-hand-pointer-height: 40%;
        $timepicker-hand-pointer-left: calc(50% - 1px);
        $timepicker-hand-pointer-width: 2px;

        $timepicker-transform-transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
          height 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

        $timepicker-time-tips-width: 32px;
        $timepicker-time-tips-height: 32px;
        $timepicker-time-tips-font-size: 1.1rem;
        $timepicker-time-tips-active-color: $white;

        $timepicker-circle-top: -21px;
        $timepicker-circle-left: -15px;
        $timepicker-circle-width: 4px;
        $timepicker-circle-border-width: 14px;
        $timepicker-circle-border-color: $primary;
        $timepicker-circle-height: 4px;
        $timepicker-circle-active-background-color: color-contrast($primary);

        $timepicker-hour-mode-color: color-contrast($primary);
        $timepicker-hour-mode-opacity: 0.54;
        $timepicker-hour-mode-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), 0.15);
        $timepicker-hour-mode-active-color: color-contrast($primary);
        $timepicker-hour-mode-font-size: 2.5rem;

        $timepicker-footer-border-bottom-left-radius: 0.5rem;
        $timepicker-footer-border-bottom-right-radius: 0.5rem;
        $timepicker-footer-height: 56px;
        $timepicker-footer-padding-x: 12px;
        $timepicker-footer-bg: var(--#{$prefix}surface-bg);

        $timepicker-container-max-height: calc(100% - 64px);

        $timepicker-icon-up-down-transition: 0.2s ease all;
        $timepicker-icon-up-down-transform: translate(-50%, -50%);
        $timepicker-icon-up-down-left: 50%;
        $timepicker-icon-up-down-width: 30px;
        $timepicker-icon-up-down-height: 30px;
        $timepicker-icon-up-top: -35px;
        $timepicker-icon-down-bottom: -47px;

        $timepicker-icon-btn-width: 30px;
        $timepicker-icon-btn-height: 30px;
        $timepicker-input-color: $primary;

        $timepicker-btn-icon-right: -10px;
        $timepicker-btn-icon-transform: translate(-50%, -50%);
        $timepicker-btn-icon-top: 50%;
        $timepicker-btn-icon-transition: all 0.3s ease;
        $timepicker-btn-icon-hover-color: $primary;
        $timepicker-btn-icon-focus-color: $primary;