react-datepicker
DatePicker
Components for date picking (DatePicker) and date range picking (RangePicker).
Usage
import { DatePicker, RangePicker } from "@crpt/react-datepicker";
<DatePicker onChange={newVal => alert("newVal:", newVal)} date="12.12.2012" />DatePicker
| PropName | Description | Example |
|---|---|---|
| date: String | Selected date in ISO 8601 format. | <DatePicker date="2014/01/02" /> |
| format: string | Date input format | <DatePicker date="10.09.2014" format="DD.MM.YYYY"> |
| onChange: Function | Called, when DatePicker input value changed. | <DatePicker onChange={val => alert(val)} /> |
| onUpdate: Function | Вызывается, когда DatePicker теряет фокус или пользователь нажимает Enter. | <DatePicker onUpdate={val => alert(val)} /> |
| placeholder: String | Set placeholder | <DatePicker placeholder="Order date" /> |
| savePlaceholder: Boolean | Don't hide placeholder | <DatePicker savePlaceholder /> |
| positionX: string | if value is "left" calendar is showed at the left, otherwise - right | |
| positionY: string | if value is "top" calendar is showed at the top, otherwise - bottom | |
| monthView: bool | Switches to month view | |
| acceptText: string | Accept control text. Default: 'Accept' | |
| resetText: string | Reset control text. Default: 'Reset' | |
| onTogglePanel: Function | Callback on toggle OptionsPanel visibility | |
| showPointer: bool | show dialogue pointer | |
| minDate: string | Minimal date | |
| maxDate: string | Maximal date | |
| rightIconReplacer: element | JSX to replace both icons at once |
RangePicker
| PropName | Description | Example |
|---|---|---|
| from: String | Стартовая дата диапазона в формате ISO 8601. | <RangePicker from="2012-12-12" /> |
| to: String | Конечная дата диапазона в формате ISO 8601. | <RangePicker to="2014/01/02" /> |
| format: string | Date input format | <RangePicker from="10.09.2014" to="20.09.2014" format="DD.MM.YYYY"> |
| onChange: Function | Вызывается, когда меняется значение в DatePicker, параметром принимает объект с полями to и from. | <RangePicker onChange={val => alert(val)} /> |
| onUpdate: Function | Вызывается, когда RangePicker теряет фокус или пользователь нажимает Enter. | <RangePicker onUpdate={val => alert(val)} /> |
| leftPlaceholder: String | Set placeholder for left input | <RangePicker leftPlaceholder="Order date" /> |
| rightPlaceholder: String | Set placeholder for right input | <RangePicker rightPlaceholder="Order date" /> |
| savePlaceholder: Boolean | Don't hide placeholder | <RangePicker savePlaceholder /> |
| positionX: string | if value is "left" calendar is showed at the left, otherwise - right | |
| positionY: string | if value is "top" calendar is showed at the top, otherwise - bottom | |
| acceptText: string | Accept control text. Default: 'Accept' | |
| resetText: string | Reset control text. Default: 'Reset' | |
| onTogglePanel: Function | Callback on toggle OptionsPanel visibility | |
| showPointer: bool | show dialogue pointer | |
| minDate: string | Minimal date | |
| maxDate: string | Maximal date | |
| noActions: bool | Remove buttons accept/clear | |
| noAutoFocus: bool | Do not focus right input after left date select |