React Bootstrap Date Picker

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

React Bootstrap date picker is a plugin that adds the function of selecting time without the necessity of using custom JavaScript code.

Basic example 

        
            
          import React from 'react';
          import { MDBDatePicker } from 'mdbreact';
  
          class DatePickerPage extends React.Component  {
            getPickerValue = (value) => {
              console.log(value);
            }
  
            render() {
              return(
                <div>
                  <MDBDatePicker getValue={this.getPickerValue} />
                </div>
              );
            }
          };
  
          export default DatePickerPage;

Translations

The picker can be extended to add support for internationalization. We use moment.locale to change language.

        
            
            import React from 'react';
            import { MDBDatePicker } from 'mdbreact';
  
            import moment from 'moment';
            import 'moment/locale/fr';
  
            class DatePickerPage extends React.Component  {
              getPickerValue = (value) => {
                console.log(value);
              }
  
              render() {
                return(
                  <div>
                    <MDBDatePicker cancelLabel="Effacer" locale={moment.locale('fr')} getValue={this.getPickerValue} />
                  </div>
                );
              }
            };
  
            export default DatePickerPage;

React Date picker - API

In this section you will find advanced information about the Date picker component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Import statement

        
            
          import { DatePicker } from "mdbreact";

API Reference: Properties

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

Name Type Default Description Example
adornmentPosition String end Specifies position of keyboard button adornment <MDBDatePicker adornementPosition='start' />
allowKeyboardControl Boolean true Enables keyboard listener for moving between days in calendar <MDBDatePicker allowKeyboardControl={false} />
animateYearScrolling Boolean false To animate scrolling to current year (with scrollIntoView) <MDBDatePicker animateYearScrolling={true} />
autoOk Boolean false Auto accept date on selection <MDBDatePicker autoOk={true} />
cancelLabel String Cancel "Cancel" label message <MDBDatePicker cancelLabel='Cancel' />
className String Adds your custom classes to the wrapper <MDBDatePicker className='custom-class'>
clearable Boolean false If true clear button will be displayed <MDBDatePicker clearable={true} />
clearLabel String Clear "Clear" label message <MDBDatePicker clearLabel='Clear' />
disableFuture Boolean false Disable future dates <MDBDatePicker disableFuture={false} />
disableOpenOnEnter Boolean false enables/disable automatic opening of the picker when the user clicks enter <MDBDatePicker disableOpenOnEnter={false} />
disablePast Boolean false Disable past dates <MDBDatePicker disablePast={false} />
emptyLabel String '' Message displaying in text field, if null passed (doesn't work in keyboard mode) <MDBDatePicker emptyLabel='' />
format String 'DD MMMM, YYYY' Date display format <MDBDatePicker format='DD-MM-YYYY' />
initialFocusedDate String Initial focused date when calendar opens, if no value is provided <MDBDatePicker initialFocusedDate='20.12.2020' />
InputAdornmentProps Object {} Props to pass to keyboard input adornment <MDBDatePicker InputAdornmentProps={} />
invalidDateMessage String Invalid Date Format Message, appearing when date cannot be parsed <MDBDatePicker invalidDateMessage='Bad format' />
invalidLabel String Unknown Message displaying in text field, if date is invalid (doesn't work in keyboard mode) <MDBDatePicker invalidLabel='Invalid label' />
keyboard Boolean false On/off manual keyboard input mode <MDBDatePicker keyboard />
keyboardIcon String event Name of icon displayed for open picker button in keyboard mode <MDBDatePicker keyboardIcon='event' /gt;
leftArrowIcon String 'keyboard_arrow_left' Left arrow icon <MDBDatePicker leftArrowIcon='keyboard_arrow_left' />
mask any Input mask, used in keyboard mode <MDBDatePicker mask={[/\d/, /\d/,'.', /\d/, /\d/,'.', /\d/, /\d/, /\d/, /\d/]} />
maxDate String '2100-01-01' Max selectable date <MDBDatePicker maxDate='2020-12-24' />
maxDateMessage String 'Date should not be after maximal date' Error message, shown if date is more then maximal date <MDBDatePicker maxDateMessage='Max date' />
minDate String '1900-01-01' Min selectable date <MDBDatePicker minDate='1990-01-01' />
minDateMessage String 'Date should not be before minimal date' Error message, shown if date is less then minimal date <MDBDatePicker minDateMessage='Min date' />
okLabel String ok "OK" button label <MDBDatePicker okLabel='Nice' />
openToYearSelection Boolean false Open MDBDatePicker from year selection <MDBDatePicker openToYearSelection={true} />
rightArrowIcon String 'keyboard_arrow_right' Right arrow icon <MDBDatePicker rightArrowIcon='keyboard_arrow_right' />
showTodayButton Boolean false If true today button will be displayed Note* that clear button has higher priority <MDBDatePicker showTodayButton />
TextFieldComponent node TextField Component that should replace the default Material TextField <MDBDatePicker TextField='input' />
theme Object Property used to change color theme of the picker <MDBDatePicker theme={{ palette: { primary: { main: '#ffbb33', }, secondary: { main: '#FF8800', contrastText: '#ffcc00', }, }, typography: { useNextVariants: true, } }} />
todayLabel String 'Today' "Today" label message <MDBDatePicker todayLabel="It's today" />
locale Object Use moment to build object with your language and pass it here to change language. <MDBDatePicker locale={moment.locale('fr')} />
value instanceOf(Date) null The value of the picker component (use with the controlled input element) <MDBDatePicker value={this.state.pickerValue} onChange={this.handleChange} />
valueDefault instanceOf(Date) new Date() The default value of the picker component (use with the uncontrolled input element) <MDBDatePicker valueDefault={new Date("12.12.2012")} />

API Reference: Methods

Name Parameters Description Example
onInputChange In keyboard mode: returns event object on every picker input change. <MDBDatePicker onInputChange={this.handleOnInput} />
getValue Returns updated picker value. <MDBDatePicker getValue={this.handlePickerValue} />