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.