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 MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import DatePicker from 'material-ui/DatePicker';

class DatePickerPage extends React.Component  {
  componentDidMount() {
    let datePickerHr = document.querySelector('.datepicker-wrapper').getElementsByTagName('hr')[0];
    datePickerHr.style.border = "none";
  }

  render() {
    return(
        <div className="md-form">
            <MuiThemeProvider>
              <div className="datepicker-wrapper">
                <DatePicker style={{borderBottom: '1px solid #bdbdbd', height: '3rem'}} id="datepicker" textFieldStyle={{width: '100%'}} hintText="Selected date" ></DatePicker>
              </div>
            </MuiThemeProvider>
        </div>
    );
  }
};

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.