rd-react-datepicker
Customizable DatePicker component for React.js.
Installation
npm i rd-react-datepicker --saveCode Example
Demo
Code
There is two ways how you can use this datepicker - with and without popup.
With popup
Simply import DatePicker component and local function to your component. local() is a wrap for moment().
;Add value state.
this.state =And write component in the render. change prop is nescessary for changing the value. For popup settings look here.
this.setState({value: newDate})}/>Without popup
Just import DatePickerPanel,DateInput and local.
;Add value state.
this.state =And write DatePickerPanel and DateInput in the render. change prop is nescessary for changing the value.
this.setState({value: newDate})}/> this.setState({value: newDate})}/>API Reference
Properties for DateInput:
| Property | Type | Default | Description |
|---|---|---|---|
mode |
string | date |
Changes view mode - date, datetime, time |
disabled |
boolean | false |
Disables controls |
showClearButton |
boolean | true |
Show or not clear input button |
format |
string | defaultFormat = {"date": "LL","datetime": "LLL","time": "LT"}; |
Changes view format that provides moment |
updateMode |
string | change |
change - change the date with 1 sec timeout. blur - change the date on input blur. |
onClick |
function | undefined |
Need for popup switching visible state. In DatePicker component it is this.setState({visible: true}) |
value |
Moment | undefined |
Datepicker value |
change |
function | undefined |
The function that changes state value |
Properties for DatePickerPanel:
| Property | Type | Default | Description |
|---|---|---|---|
mode |
string | date |
Changes view mode - date, datetime, time |
value |
Moment | undefined |
Datepicker value |
change |
function | undefined |
The function that changes state value |
DatePicker compoze all props.
License
This project is licensed under the MIT license. See the LICENSE file for more info.