2015-10-31 22:03:49 +03:00
# Date Picker
2015-09-04 23:09:16 +03:00
2015-10-31 22:03:49 +03:00
A [dialog ](https://www.google.com/design/spec/components/pickers.html#pickers-date-pickers ) 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.
2015-09-04 23:09:16 +03:00
2015-10-31 22:03:49 +03:00
<!-- example -->
```jsx
2015-11-10 13:07:43 +03:00
import DatePicker from 'react-toolbox/lib/date_picker';
2015-09-04 23:09:16 +03:00
2015-11-16 19:04:13 +03:00
const datetime = new Date(2015, 10, 16);
const min_datetime = new Date(new Date(datetime).setDate(8));
2015-11-11 22:34:19 +03:00
datetime.setHours(17);
datetime.setMinutes(28);
class DatePickerTest extends React.Component {
state = {
date2: datetime
};
handleChange = (item, value) => {
const newState = {};
newState[item] = value;
this.setState(newState);
};
render () {
return (
< section >
2015-11-21 16:46:24 +03:00
< 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} / >
2015-11-11 22:34:19 +03:00
< / section >
);
}
}
2015-09-04 23:09:16 +03:00
```
## Properties
| Name | Type | Default | Description|
2015-10-31 23:55:12 +03:00
|:-----|:-----|:-----|:-----|
2015-11-21 16:46:24 +03:00
| `label` | `String` | | The text string to use for the floating label element in the input component.|
2015-11-16 19:04:13 +03:00
| `maxDate` | `Date` | | Date object with the maximum selectable date. |
| `minDate` | `Date` | | Date object with the minimum selectable date. |
2015-11-10 17:27:03 +03:00
| `onChange` | `Function` | | Callback called when the picker value is changed.|
2015-11-17 05:49:25 +03:00
| `placeholder` | `String` | | The text string to use like a input placeholder.|
2015-10-31 23:55:12 +03:00
| `value` | `Date` | | Date object with the currently selected date. |