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 React allows us to automatically initialize a Timepicker when the page is loaded. 

        
            
            import React from 'react';
            import { MDBTimepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBTimepicker />
              );
            }

Inline Timepicker with 12h

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

        
            
            import React from 'react';
            import { MDBTimepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBTimepicker inline />
              );
            }

Inline Timepicker with 24h

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

        
            
            import React from 'react';
            import { MDBTimepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBTimepicker inline format="24h" />
              );
            }

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

        
            
              import React from 'react';
              import { MDBTimepicker } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
                  <MDBTimepicker customIconSize='2x' customIcon='fab fa-react' />
                );
              }

With icon

        
            
              import React from 'react';
              import { MDBTimepicker } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
                  <MDBTimepicker customIconSize='2x' customIcon='fab fa-react' btnIcon={false} />
                );
              }

Without icon

MDBTimepicker allows to set input without icon. 

        
            
            import React, { useRef } from 'react';
            import { MDBTimepicker, MDBBtn } from 'mdb-react-ui-kit';
    
            export default function App() {
              const customToggle1 = useRef(null);
              const customToggle2 = useRef(null);

              return (
                <>
                  <div className='me-3'>
                    <MDBTimepicker showRef={customToggle1} noIcon />
                    <MDBBtn className='mt-2' ref={customToggle1} size='sm'>
                      Toggle TimePicker above
                    </MDBBtn>
                  </div>
      
                  <div>
                    <MDBTimepicker showRef={customToggle2} noIcon />
                    <MDBBtn className='mt-2' ref={customToggle2} size='sm'>
                      Toggle TimePicker above
                    </MDBBtn>
                  </div>
                </>
              );
            }

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. 

        
            
            import React from 'react';
            import { MDBTimepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <>
                  <MDBTimepicker defaultTime='02:12 PM' />
                  <MDBTimepicker defaultTime='05:12 AM' />
                  <MDBTimepicker defaultTime='05:12' />
                  <MDBTimepicker format='24h' defaultTime='23:44' />
                </>
              );
            }

Format 24h

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

        
            
            import React from 'react';
            import { MDBTimepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBTimepicker format='24h' />
              );
            }

Just Input

You can set a timepicker to just an input.

        
            
            import React from 'react';
            import { MDBTimepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBTimepicker justInput />
              );
            }

Increment

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

        
            
            import React from 'react';
            import { MDBTimepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBTimepicker increment />
              );
            }

Max time

You can max time to timepicker with options.

        
            
            import React from 'react';
            import { MDBTimepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBTimepicker maxTime="6:35" />
              );
            }

Max time with PM

You can max time to timepicker with PM.

        
            
            import React from 'react';
            import { MDBTimepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBTimepicker maxTime="6:35 PM" />
              );
            }

Max time with AM

You can max time to timepicker with AM.

        
            
            import React from 'react';
            import { MDBTimepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBTimepicker maxTime="6:35 AM" />
              );
            }

Min time

You can min time to timepicker with options.

        
            
            import React from 'react';
            import { MDBTimepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBTimepicker minTime="10:15" />
              );
            }

Min time with PM

You can min time to timepicker with PM.

        
            
            import React from 'react';
            import { MDBTimepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBTimepicker minTime="6:35 PM" />
              );
            }

Min time with AM

You can min time to timepicker with AM.

        
            
            import React from 'react';
            import { MDBTimepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBTimepicker minTime="6:35 AM" />
              );
            }

Max/Min hours

You can max and min hour to timepicker with options.

        
            
            import React from 'react';
            import { MDBTimepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBTimepicker maxHour={12} minHour={5} />
              );
            }

Maximum hour

You can set only maximum hour to timepicker.

        
            
            import React from 'react';
            import { MDBTimepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBTimepicker maxHour={5} />
              );
            }

Minimum hour

You can set only minimum hour to timepicker.

        
            
            import React from 'react';
            import { MDBTimepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBTimepicker 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: 

        
            
            import React from 'react';
            import { MDBTimepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBTimepicker
                  inputLabel='Select a time'
                  invalidLabel='Invalid Time Format'
                  clearLabel='Clear'
                  submitLabel='Ok'
                  cancelLabel='Cancel'
                />
              );
            }

Timepicker - API

Import

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

Properties

MDBTimepicker

Name Type Default Description Example
btnIcon boolean 'true' Appends an icon as a button. Set it to false to keep icon only. <MDBTimepicker btnIcon={false} />
className string '' Add custom class to MDBTimepicker input wrapper <MDBTimepicker className="class" />
cancelLabel string 'Cancel' Changes a cancel button label <MDBTimepicker cancelLabel='Close' />
clearLabel string 'Clear' Changes a clear button label <MDBTimepicker clearLabel='Clear a picker' />
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' />
customValue string '' Custom value to control the input <MDBTimepicker customIcon='fab fa-react' customValue={value} />
defaultValue string '' Sets picker default value <MDBTimepicker defaultValue="12:33 AM" />
format "12h" | "24h" '12h' Sets a format for the picker <MDBTimepicker format='24h' />
inline boolean 'false' Changes a picker into inline version <MDBTimepicker inline />
increment boolean 'false' Increment minutes by 5 <MDBTimepicker increment />
inputWrapperTag string 'span' Defines tag of the MDBTimepicker input wrapper element <MDBTimepicker inputWrapperTag="span" />
inputID string '' Sets an ID for the input <MDBTimepicker inputID='customID' />
inputClasses string '' Add custom class to input <MDBTimepicker inputClasses='test' />
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' />
justInput boolean 'false' Opens a timepicker after clicking on input <MDBTimepicker inputID='customID' />
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} />
submitLabel string 'Ok' Changes a submit button label <MDBTimepicker submitLabel='Submit' />
timePickerClasses string '' Sets custom classes to the picker modal element <MDBTimepicker timePickerClasses='bg-danger' />

Methods

Name Type Default Description Example
onChange (value: string) => void - Returns string value on input change <MDBDatepicker onChange={handleTimepicker} />