Timepicker

React 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.


Inline Timepicker with 12h

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


Inline Timepicker with 24h

MDB Timepicker allows you to use a inline version timepicker. You have to add options format24 to 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.

With button


With icon


Without icon

MDBTimepicker allows to set input without icon.


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

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.


Format 24h

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


Just Input

You can set a timepicker to just an input.


Increment

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


Max time

You can max time to timepicker with options.


Max time with PM

You can max time to timepicker with options.


Max time with AM

You can max time to timepicker with options.


Min time

You can min time to timepicker with options.


Min time with PM

You can min time to timepicker with options.


Min time with AM

You can min time to timepicker with options.


Max/Min hours

You can max and min hour to timepicker with options.


Maximum hour

You can set only maximum hour to timepicker.


Minimum hour

You can 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


        import { MDBTimepicker } from 'mdb-react-ui-kit';
      

Properties

MDBTimepicker

Name Type Default Description Example
inputWrapperTag String 'span' Defines tag of the MDBTimepicker input wrapper element <MDBTimepicker inputWrapperTag="span" />
className String '' Add custom class to MDBTimepicker input wrapper <MDBTimepicker className="class" />
defaultValue String '' Sets picker default value <MDBTimepicker defaultValue="12:33 AM" />
minHour Number '' Sets picker minimum hour <MDBTimepicker minHour={8} />
maxHour Number '' Sets picker maximum hour <MDBTimepicker maxHour={10} />
minTime String '' Sets picker minimum time <MDBTimepicker minTime='06:07 AM' />
maxTime String '' Sets picker maximum time <MDBTimepicker maxTime='09:07 AM' />
noIcon Boolean 'false' Removes icon from picker input <MDBTimepicker noIcon />
showRef React.RefObject '' Reference to the custom toggle element <MDBTimepicker showRef={customRef} />
inputID String '' Sets an ID for the input <MDBTimepicker inputID='customID' />
justInput Boolean 'false' Opens a timepicker after clicking on input <MDBTimepicker inputID='customID' />
inputLabel String 'Select a time' Changes an input label <MDBTimepicker inputLabel='Pick a time' />
invalidLabel String 'Invalid Time Format' Changes an invalid feedback label <MDBTimepicker invalidLabel='Provide a correct time' />
clearLabel String 'Clear' Changes a clear button label <MDBTimepicker clearLabel='Clear a picker' />
submitLabel String 'Ok' Changes a submit button label <MDBTimepicker submitLabel='Submit' />
cancelLabel String 'Cancel' Changes a cancel button label <MDBTimepicker cancelLabel='Close' />
format "12h"/"24h" '12h' Sets a format for the picker <MDBTimepicker format='24h' />
timePickerClasses String '' Sets custom classes to the picker modal element <MDBTimepicker timePickerClasses='bg-danger' />
customIcon String '' Sets a custom icon. You have to provide an icon type as well (i.e. "far", "fas", "fab" <MDBTimepicker customIcon='fab fa-react' />
customIconSize String '' Sets a size for the custom icon <MDBTimepicker customIcon='fab fa-react' customIconSize='2x' />
btnIcon Boolean 'true' Appends an icon as a button. Set it to false to keep icon only. <MDBTimepicker btnIcon={false} />
inline Boolean 'false' Changes a picker into inline version <MDBTimepicker inline />
increment Boolean 'false' Increment minutes by 5 <MDBTimepicker increment />