@crpt/react-datepicker

react-datepicker React component

Stats

StarsIssuesVersionUpdatedCreatedSize
@crpt/react-datepicker
0161.2.212 years ago3 years agoMinified + gzip package size for @crpt/react-datepicker in KB

Readme

react-datepicker

Travis npm package Coveralls

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.