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

Basic example

MDB allows us to automatically initialize a Timepicker when the page is loaded. You have to have a class timepicker in your picker wrapper.

Edit in sandbox 
        
            
          <div class="form-outline timepicker">
            <input type="text" class="form-control" id="form11" />
            <label class="form-label" for="form11">Select a time</label>
          </div>

Inline Timepicker with 12h

MDB Timepicker allows you to use a inline version timepicker. Default version is with 12h.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-inline-12">
            <input type="text" class="form-control" id="form41" />
            <label class="form-label" for="form41">Select a time</label>
          </div>
        
        
    
        
            
          const pickerInline = document.querySelector('.timepicker-inline-12');
          const timepickerMaxMin = new mdb.Timepicker(pickerInline, {
            format12:true,
            inline: true
          });

Inline Timepicker with 24h

MDB Timepicker allows you to use a inline version timepicker. You have to add options format24 to true.

Edit in sandbox 
        
            

          <div class="form-outline timepicker-inline-24">
            <input type="text" class="form-control" id="form43" />
            <label class="form-label" for="form43">Select a time</label>
          </div>

        
        
    
        
            
          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 and timepicker-icon to your icon.

With button

Edit in sandbox 
        
            
            <div class="form-outline timepicker">
              <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>

With icon

Edit in sandbox 
        
            

            <div class="form-outline timepicker">
              <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>

Without icon

MDBTimepicker allows to set input without icon. You can set this with data-mdb-with-icon set to false or with the options withIcon set to false if you are initiate timepicker with js.

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

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

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

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

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

Default time

MDB Timepicker allows to initialize a default time in the picker and input. You can set it with option defaultTime. This options 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">
            <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">
            <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">
            <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 ">
            <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">
            <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">
            <input type="text" class="form-control" id="form212" />
            <label class="form-label" for="form212">With new Date with 24h</label>
          </div>
        
        
    
        
            
          //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 on modal approve, you have to add custom event to selected picker.

Input value:
Edit in sandbox 
        
            
          <div class="form-outline" id="timepicker-value">
            <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>
        
        
    
        
            
          const timepickerValue = document.querySelector('#timepicker-value');
          const tminputValue = new mdb.Timepicker(timepickerValue);

          timepickerValue.addEventListener('input.mdb.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-mdb-format24 and set it to true.

Edit in sandbox 
        
            
          <div class="form-outline timepicker" 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>
        
        
    
        
            
          const picker = document.querySelector('.timepicker-format');
          const tpFormat24 = new mdb.Timepicker(picker, { 
            format24: true
          });

Just Input

You can set a timepicker to just an input.

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

Increment

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

Edit in sandbox 
        
            
          <div class="form-outline timepicker-inc ">
            <input type="text" class="form-control" id="form45" />
            <label class="form-label" for="form45">Select a time</label>
          </div>
        
        
    
        
            
          const pickerInc = document.querySelector('.timepicker-inc');
          const timepickerInc = new mdb.Timepicker(pickerInc, {
            increment: true,
          });

Max time

You can max time to timepicker with options.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-max-time">
            <input type="text" class="form-control" id="form46" />
            <label class="form-label" for="form46">Select a time</label>
          </div>
        
        
    
        
            
          const pickerMaxTime = document.querySelector('.timepicker-max-time');
          const timepickerMaxTime = new mdb.Timepicker(pickerMaxTime, {
            maxTime: '6:35'
          });

Max time with PM

You can max time to timepicker with options.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-max-time-pm">
            <input type="text" class="form-control" id="form48" />
            <label class="form-label" for="form48">Select a time</label>
          </div>
        
        
    
        
            
          const pickerMaxTimePM = document.querySelector('.timepicker-max-time-pm');
          const tmMaxPm = new mdb.Timepicker(pickerMaxTimePM, {
            maxTime: '6:35 PM'
          });

Max time with AM

You can max time to timepicker with options.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-max-time-am">
            <input type="text" class="form-control" id="form410" />
            <label class="form-label" for="form410">Select a time</label>
          </div>
        
        
    
        
            
          const pickerMaxTimeAM = document.querySelector('.timepicker-max-time-am');
          const tmMaxAm = new mdb.Timepicker(pickerMaxTimeAM, {
            maxTime: '6:35 AM'
          });

Min time

You can min time to timepicker with options.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-min-time">
            <input type="text" class="form-control" id="form412" />
            <label class="form-label" for="form412">Select a time</label>
          </div>
        
        
    
        
            
          const pickerMinTime = document.querySelector('.timepicker-min-time');
          const timepickerMinTime = new mdb.Timepicker(pickerMinTime, {
            minTime: '10:15'
          });

Min time with PM

You can min time to timepicker with options.

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

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

Min time with AM

You can min time to timepicker with options.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-min-time-am" style="width:22rem">
            <input type="text" class="form-control" id="form416" />
            <label class="form-label" for="form416">Select a time</label>
          </div>
        
        
    
        
            
          const pickerMinTimeAM = document.querySelector('.timepicker-min-time-am');
          const tmMinAm = new mdb.Timepicker(pickerMinTimeAM, {
            minTime: '6:35 AM'
          });

Max/Min hours

You can max and min hour to timepicker with options.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-max-min">
            <input type="text" class="form-control" id="form417" />
            <label class="form-label" for="form4">Select a time</label>
          </div>
        
        
    
        
            
          const pickerMaxMin = document.querySelector('.timepicker-max-min');
          const timepickerMaxMin = new mdb.Timepicker(pickerMaxMin, {
            maxHour: '12',
            minHour: '5'
          });

Maximum hour

You can set only maximum hour to timepicker.

Edit in sandbox 
        
            
          <div class="form-outline timepicker-max">
            <input type="text" class="form-control" id="form419" />
            <label class="form-label" for="form419">Select a time</label>
          </div>
        
        
    
        
            
          const pickerMax = document.querySelector('.timepicker-max');
          const timepickerMax = new mdb.Timepicker(pickerMax, { 
            maxHour: '5'
          });

Minimum hour

You can set only minimum hour to timepicker.

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

        
        
    
        
            
          const pickerMin = document.querySelector('.timepicker-min');
          const timepickerMin = new mdb.Timepicker(pickerMin, {
            minHour: '8'
          });

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

Usage

Via data attributes or JavaScript, the timepicker plugin allows to select a time and show it on the selected output.

Via classes

Add class timepicker to your selected wrapper with input. It automaticly set timepicker to this element. Timepicker will be toggling with dynamic icon created in this container.

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

Via data attributes

Add data-mdb-toggle="timepicker" to a input or selected element like button.

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

Via JavaScript

Via JavaScript plugin required a class or ID wrapper element with timepicker class.

Edit in sandbox 
        
            
        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-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.
disabled boolean false

Set a disabled attribute to input in wrapper
enableValidation boolean true

Enables input validation
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
maxHour string | number ""

Allows to set max hour for picker
minHour string | number ""

Allows to set min hour for picker
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 timepicker.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)

Events

Name Description
input.mdb.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.