React Bootstrap Time Picker

React Time Picker - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Bootstrap material time picker is a component which uses a dialog to select a single time in hours:minutes format. The selected time is indicated bu the filled circle at the end of the clock hand.

Basic example 

        
            
          import React, { Component } from "react";
          import { MDBTimePicker, MDBCol } from "mdbreact";
  
          class TimePickerPage extends Component {
            getPickerValue = (value) => {
              console.log(value);
            };
  
            render() {
              return (
                <MDBCol md="3">
                  <MDBTimePicker
                    id="timePicker"
                    label="12hrs format"
                    getValue={this.getPickerValue}
                  />
                </MDBCol>
              );
            }
          }
  
          export default TimePickerPage;

Twenty four hours clock

Set 12 or 24 hour clock.

        
            
          import React, { Component } from "react";
          import { MDBTimePicker, MDBCol } from "mdbreact";
  
          class TimePickerPage extends Component {
            getPickerValue = (value) => {
              console.log(value);
            };
  
            render() {
              return (
                <MDBCol md="3">
                  <MDBTimePicker
                    id="timePicker"
                    label="24hrs format"
                    hours={12}
                    minutes={0}
                    hoursFormat={24}
                    getValue={this.getPickerValue}
                  />
                </MDBCol>
              );
            }
          }
  
          export default TimePickerPage;

React TimePicker - API

In this section you will find advanced information about the TimePicker component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Imports 

        
            
          import React from 'react';
          import { MDBTimePicker } from 'mdbreact';

API Reference: Properties

The table below shows the configuration options of the MDBTimePicker component.

Name Type Default Description Example
id String Required! The ID of time indicator input <MDBTimePicker id="timePicker" />
allowedValues Array of Number all Determines which hour is allowed to be selected <MDBTimePicker allowedValues={[1, 3, 5, 7, 9]} />
autoSwitch Boolean true Allows to auto switch to minutes if hour has been selected <MDBTimePicker autoSwitch={false} />
cancelable Boolean false Switches on the 'Cancel' button <MDBTimePicker cancelable />
cancelText String Cancel Rewrites default Cancel button text <MDBTimePicker cancelText="Remove" />
clearable Boolean false Switches on the 'Clear' button <MDBTimePicker clearable />
clearText String Clear Rewrites default Clear button text <MDBTimePicker clearText="Vanish" />
closeOnCancel Boolean false Autmatically close time picker when Cancel button is clicked <MDBTimePicker closeOnCancel />
color String primary Colour of the time display and buttons. Use mdb color pallete <MDBTimePicker color="default" />
dayTime String am Sets day time when use 12h time picker <MDBTimePicker dayTime="pm" />
doneText String Done Rewrites default Done button text <MDBTimePicker doneText="OK" />
hours Number 12 Sets hours placeholder <MDBTimePicker hours={5} />
hoursFormat Number 12 Changes hour format. You can use 12 or 24 hrs format <MDBTimePicker hoursFormat={24} />
label String Sets label for time indicator input <MDBTimePicker label="Pick the time" />
minutes Number 0 Sets minutes placeholder <MDBTimePicker minutes={30} />
placeholder String Sets placeholder for time indicator input <MDBTimePicker placeholder="Placeholder" />
startFromInner Boolean true In 24hrs mode determines if higher numbers are on outer or inner radius <MDBTimePicker startFromInner={false} />

API Reference: Methods

The table below shows the methods which you can use with MDBInput component.

Name Parameters Description Example
getValue Returns MDBTimePicker value on input change <MDBTimePicker getValue={this.handleChange} >