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 {
2015-12-20 19:55:34 +03:00
state = {date2: datetime};
2015-11-11 22:34:19 +03:00
handleChange = (item, value) => {
2015-12-20 19:55:34 +03:00
this.setState({...this.state, [item]: value});
2015-11-11 22:34:19 +03:00
};
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} / >
2016-04-13 04:59:44 +03:00
< DatePicker label = 'Formatted date' inputFormat = {(value) = > `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}` } onChange={this.handleChange.bind(this, 'date3')} value={this.state.date3} />
2015-11-11 22:34:19 +03:00
< / section >
);
}
}
2015-09-04 23:09:16 +03:00
```
2016-05-28 23:04:00 +03:00
If you want to provide a theme via context, the component key is `RTDatePicker` .
2015-09-04 23:09:16 +03:00
## Properties
2016-03-25 16:43:57 +03:00
| Name | Type | Default | Description|
2015-10-31 23:55:12 +03:00
|:-----|:-----|:-----|:-----|
2016-03-25 16:43:57 +03:00
| `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.|
2016-04-10 19:53:44 +03:00
| `inputClassName` | `String` | | This class will be applied to `Input` component of `DatePicker` . |
2016-03-25 16:43:57 +03:00
| `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.|
2016-07-10 14:42:35 +03:00
| `onEscKeyDown` | `Function` | | Callback called when the ESC key is pressed with the overlay active. |
| `onOverlayClick` | `Function` | | Callback to be invoked when the dialog overlay is clicked.|
2016-03-25 16:43:57 +03:00
| `value` | `Date` | | Date object with the currently selected date. |
2016-05-21 21:52:48 +03:00
2016-05-28 23:04:00 +03:00
## Theme
2016-05-21 21:52:48 +03:00
| Name | Description|
|:---------|:-----------|
| `active` | Used for the active day and year.|
| `button` | Used for the buttons in the dialog.|
| `calendar` | Used for the calendar root element.|
| `calendarWrapper` | Used as wrapper for the calendar component inside dialog.|
| `date` | Used for the date element inside header.|
| `day` | Used for the day element inside the calendar.|
| `days` | Used for the list of days inside a month.|
| `dialog` | Used for the dialog component.|
| `disabled` | Added to day element when day is disabled.|
| `header` | Used for the dialog header,.|
| `input` | Used for Input element that opens the picker.|
| `month` | Used for the month root element.|
| `monthsDisplay` | Added to the root dialog when months are displayed.|
| `next` | Used for the next month icon.|
| `prev` | Used for the prev month icon.|
| `title` | Used for the month title element.|
| `week` | Used for the weekdays wrapper.|
| `year` | Used for the year element inside header.|
| `years` | Used for the years list in years view.|
| `yearsDisplay` | Added to the root dialog when years are displayed.|