React Bootstrap Date Picker

React Date Picker - Bootstrap 4 & Material Design

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

This documentation may contain syntax introduced in the MDB React 5.0.0 and can be incompatible with previous versions. For old datepicker documentation please follow the link.

Basic example

Show code

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

Inline DatePicker

You can set a inline DatePicker with prop inline.

Show code

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

Themes Defaults

You can set a themes to DatePicker Default with prop theme.

Available colors:

warning
danger
success
primary
dark
info
secondary

Show code

        
            
          import React from 'react';
          import { MDBDatePickerV5 } from 'mdbreact';
  
          class DatePickerPage extends React.Component {
  
            render() {
              return(
                <div>
                  <MDBDatePickerV5 theme="warning" getValue={(e)=> console.log(e)} />
                    <MDBDatePickerV5 theme="danger" getValue={(e)=> console.log(e)} />
                </div>
              );
            }
          };
  
          export default DatePickerPage;

Themes Inline

You can set a themes to DatePicker Inline with prop theme.

Available colors:

warning
danger
success
primary
dark
info
secondary

Show code

        
            
          import React from 'react';
          import { MDBDatePickerV5 } from 'mdbreact';
  
          class DatePickerPage extends React.Component {
  
            render() {
              return(
                <div>
                  <MDBDatePickerV5 inline theme="warning" getValue={(e)=> console.log(e)} />
                    <MDBDatePickerV5 inline theme="danger" getValue={(e)=> console.log(e)} />
                </div>
              );
            }
          };
  
          export default DatePickerPage;

Disabled Past

You can set a disabled past to DatePicker with prop disablePast.

Show code

        
            
          import React from 'react';
          import { MDBDatePickerV5 } from 'mdbreact';
  
          class DatePickerPage extends React.Component {
  
            render() {
              return(
              <div>
                <MDBDatePickerV5 disablePast getValue={(e)=> console.log(e)} />
                  <MDBDatePickerV5 disablePast inline getValue={(e)=> console.log(e)} />
              </div>
              );
            }
          };
  
          export default DatePickerPage;

Disabled Future

You can set a disabled future to DatePicker with prop disableFuture.

Show code

        
            
          import React from 'react';
          import { MDBDatePickerV5 } from 'mdbreact';
  
          class DatePickerPage extends React.Component {
  
            render() {
              return(
                <div>
                  <MDBDatePickerV5 disableFuture getValue={(e)=> console.log(e)} />
                    <MDBDatePickerV5 disableFuture inline getValue={(e)=> console.log(e)} />
                </div>
              );
            }
          };
  
          export default DatePickerPage;

Disabled Dates

You can set a disabled custom dates disabledDates.

Show code

        
            
          import React from "react";
  import { MDBDatePickerV5 } from "mdbreact";
  
  class DatePickerPage extends React.Component {
    render() {
      return (
        <div>
          <MDBDatePickerV5
            disabledDates={[
              "2020-04-12",
              "2020-04-13",
              "2020-04-14",
              "2020-04-15",
              "2020-04-16",
              "2020-04-17",
              "2020-04-18",
              "2020-04-19",
              "2020-04-20",
            ]}
          />
  
          <MDBDatePickerV5
            inline
            disabledDates={[
              "2020-04-12",
              "2020-04-13",
              "2020-04-14",
              "2020-04-15",
              "2020-04-16",
              "2020-04-17",
              "2020-04-18",
              "2020-04-19",
              "2020-04-20",
            ]}
          />
        </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

Show code

javascript

        
            
          import { MDBDatePickerV5 } from "mdbreact";

API Reference: Properties

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

Name	Type	Default	Description	Example
`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} />`
`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' />`
`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' />`
`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' />`
`rightArrowIcon`	String	`'keyboard_arrow_right'`	Right arrow icon	`<MDBDatePicker rightArrowIcon='keyboard_arrow_right' />`
`component`	node	`TextField`	Component that should replace the default DatePicker component	`<MDBDatePicker component='input' />`
`theme`	Object		Property used to change color theme of the picker	`<MDBDatePicker theme="warning" />`
`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} />`