Timepicker

Vue 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

Add Timepicker element to your site with the MDBTimepicker component.


Inline Timepicker with 12h

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


Inline Timepicker with 24h

MDB Timepicker allows you to use an inline version timepicker. Add :hoursFormat="24" to make it use 24h format.


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. Use iconClass property with icon class of your choice.


Without icon

MDBTimepicker allows to set input without icon. Use :icon="false" to remove the icon from your timepicker input. Use togglePicker method on your timepicker ref to open it from the external element.


Default time

MDB Timepicker allows to initialize a default time in the picker and input. Pass a proper date value to v-model property to add default time. This property 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: Hovering over the timepicker input will show you the information about proper date pattern. If you are using string with PM/AM, you have to have hoursFormat property set to 12 (default value). Also if you are using string without PM/AM and you would like have 24h format hour you have to set hoursFormat property to 24. If you will only put a string without PM/AM and hoursFormat property to 24 you are gonna have a timepicker with 12h and format set to AM with default.


Handle input value

Handling input value on modal approve is automatically binded to v-model value of timepicker component.


Format 24h

Timepicker allows you to use time format with 24 hours. You can set it with the :hoursFormat="24" property.


Just Input

You can set a timepicker to just an input with :icon="false" and selfOpen properties.


Increment

You can use :increment=" 5 | 10 | 15 | 30 " property to increment minutes value. Default value for increment is 1.


Max time

Add max property to set maximum time value.


Max time with PM

Add max property to set maximum time value.


Max time with AM

Add max property to set maximum time value.


Min time

Add min property to set minimum time value.


Min time with PM

Add min property to set minimum time value.


Min time with AM

Add min property to set minimum time value.


Max/Min hours

Add min and max properties to limit the time value


Maximum hour

Pass only hour value to max property to set only maximum hour to timepicker.


Minimum hour

Pass only hour value to min property to set only minimum hour to timepicker.


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:

Timepicker - API


Import


        <script>
          import {
            MDBTimepicker
          } from 'mdb-vue-ui-kit';
        </script>
      

Properties

Name Type Default Description
amLabel String 'AM' Changes AM button text
pmLabel String 'PM' Changes PM button text
okLabel String 'Cancel' Changes OK button text
clearLabel String 'Clear' Changes clear button text
cancelLabel String 'Cancel' Changes cancel button text
invalidLabel String 'Invalid date format' Changes invalid date message
label String '' Sets label on Timepicker input element
id String 'MDBInput-random id' Sets id on Timepicker input element
icon Boolean true Enables icon on Timepicker input element
iconClass String 'far fa-clock fa-sm' Changes icon displayed on Timepicker input element
inline Boolean false Changes Tiempicker display mode to inline (dropdown)
selfOpen Boolean false Enables opening Timepicker on input click
housrFormat Number 12 Changes hours format. Use 12 | 24
max Number | String - Changes max available time
min Number | String - Changes min available time
increment Number 1 Allows to set increment minutes by 1 | 5 | 10 | 15 | 30
v-model String '' Returns current picked time

Methods

Name Description Example
togglePicker Manually toggles open/close Timepicker pickerRef.togglePicker()

            <MDBTimepicker v-model="picker1" ref="pickerRef" />
            <MDBBtn @click.stop="$refs.pickerRef.togglePicker()" color="primary">Open</MDBBtn>
          

Events

Name Description
open This event fires immediately when the Tiempicker is opened.
close This event fires immediately when the Tiempicker is closed.

            <MDBTimepicker v-model="picker1" @close="doSomething" />