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.