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. |
33ff49119b