Rd-react-datepicker NPM

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.

react reactdom date datepicker pick picker moment overlay component popover popup

@types/classnames @types/node @types/prop-types @types/react @types/react-dom classnames gh-pages moment prop-types rd-react-overlay react react-dom

@infinitebrahmanuniverse/nolb-rd @everything-registry/sub-chunk-2536

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago