Components for date picking (DatePicker) and date range picking (RangePicker).
import { DatePicker, RangePicker } from "@crpt/react-datepicker";
<DatePicker onChange={newVal => alert("newVal:", newVal)} date="12.12.2012" />
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 |
|
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 |
|