react-toolbox/components/date_picker

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} />
      </section>
    );
  }
}

Properties

Name	Type	Default	Description
className	String		This class will be placed at the top of the DatePickerDialog component so you can provide custom styles.
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.
placeholder	String		The text string to use like a input placeholder.
value	Date		Date object with the currently selected date.