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 | |