react-toolbox/components/date_picker/readme.md

Date Picker

A dialog date picker is used to select a single date. The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight.

import DatePicker from 'react-toolbox/lib/date_picker';

const datetime = new Date(2015, 10, 16);
const min_datetime = new Date(new Date(datetime).setDate(8));
datetime.setHours(17);
datetime.setMinutes(28);

class DatePickerTest extends React.Component {
  state = {date2: datetime};

  handleChange = (item, value) => {
    this.setState({...this.state, [item]: value});
  };

  render () {
    return (
      <section>
        <DatePicker label='Birthdate' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
        <DatePicker label='Expiration date' minDate={min_datetime} onChange={this.handleChange.bind(this, 'date2')} value={this.state.date2} />
        <DatePicker label='Formatted date' inputFormat={(value) => `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`} onChange={this.handleChange.bind(this, 'date3')} value={this.state.date3} />
      </section>
    );
  }
}

Properties

Name	Type	Default	Description
autoOk	Boolean	false	Automatically selects a date upon clicking on a day
className	String		This class will be placed at the top of the DatePickerDialog component so you can provide custom styles.
inputClassName	String		This class will be applied to Input component of DatePicker.
inputFormat	Function		Function to format the date displayed on the input.
label	String		The text string to use for the floating label element in the input component.
maxDate	Date		Date object with the maximum selectable date.
minDate	Date		Date object with the minimum selectable date.
onChange	Function		Callback called when the picker value is changed.
value	Date		Date object with the currently selected date.