rd-react-datepicker
Customizable DatePicker component for React.js.
Installation
npm i rd-react-datepicker --save
Code 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.