1.1.1 • Published 7 years ago
rd-react-datepicker v1.1.1
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()
.
import { DatePicker, local } from 'rd-react-datepicker';
Add value
state.
this.state = {
value: local()
}
And write component in the render. change
prop is nescessary for changing the value
. For popup settings look here.
<DatePicker
value={this.state.value}
change={(newDate) => this.setState({value: newDate})}/>
Without popup
Just import DatePickerPanel
,DateInput
and local
.
import { DatePickerPanel, DateInput, local } from 'rd-react-datepicker';
Add value
state.
this.state = {
value: local()
}
And write DatePickerPanel
and DateInput
in the render. change
prop is nescessary for changing the value
.
<DateInput
value={this.state.value}
change={(newDate) => this.setState({value: newDate})}/>
<DatePickerPanel
value={this.state.value}
change={(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.