Bootstrap Date Picker MDB Pro component

Date picker is a React component that adds function of selecting time without necessity of typing it by hand.


Basic example



Basic usage:



import React from 'react';
import { MDBDatePicker, Container } from 'mdbreact';

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

  render() {
    return(
      <Container className="mt-5">
        <MDBDatePicker getValue={this.getPickerValue} />
      </Container>
    );
  }
};

export default DatePickerPage;

API Reference

All properties and options refered to DatePicker component.

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

Note: Javascript numeration

Months in a JavaScript Date object are zero-indexed. Meaning, new Date(2015, 3, 20) is 20 April, 2016.

To stay consistent with this, whenever an integer is used in reference to a month, pickadate treats it as zero-indexed. Dates as strings are still parsed as expected.