Rate this docs

React Bootstrap Time picker MDB Pro component

React Time Picker - Bootstrap 4 & Material Design

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 from "react";
          import { MDBTimePicker, Col } from "mdbreact";

          class TimePickerPage extends React.Component {
            getPickerValue = value => {
              console.log(value);
            };

            render() {
              return (
              <Col md="3">
                <MDBTimePicker id="timePicker" label="12hrs format" getValue={this.getPickerValue} />
              </Col>
              );
            }
          }

          export default TimePickerPage;



      

Twenty four hours clock

Set 12 or 24 hour clock.



          import React from "react";
          import { MDBTimePicker, Col } from "mdbreact";

          class TimePickerPage extends React.Component {
            getPickerValue = value => {
              console.log(value);
            };

            render() {
              return (
                <Col md="3">
                  <MDBTimePicker id="timePicker" label="24hrs format" hours={12} minutes={00} hoursFormat={24} getValue={this.getPickerValue} />
                </Col>
              );
            }
          }

          export default TimePickerPage;




      

React Bootstrap 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" />
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} >