rc-date-core
A compact and delicate crafted core of date input.
Installation
npm install rc-date-core --save
Props
date picker props
- onChange (func) return string value formatted by prop 'mode' and 'returnFormat' and date object
- value (string, date object, int) date value of input e.g. 'yyyy/MM/dd' , 1464081349000
- min (string) min date limit depended on mode e.g. '2015/01/01'
- max (string) max date limit same as above
- mode (string default 'day') 'year' 'month' 'day' 'hour' 'minute' 'second'
- returnFormat (string) e.g. 'yyyy/MM/dd' if none provided, just decided by 'mode'
- className (string)
date input props
- ...any props above
- autoPosition (bool default false) enable picker changing position when scrolling
- preferPosition (string default "bottomLeft") initial position of picker(als0 will affect autoPosition when enabled)
- container (selector or element default window) scroll container for autoPosition
- closeOnSelect (bool default true) close picker when select
- closeOnClickOutside (bool default true) close picker when click outside
- displayFormat (string) e.g. 'yyyy/MM/dd' input value display, if none provided, just decided by 'mode'
- ...any other props of react input element e.g. 'readOnly' 'disabled'
Usage
import {DatePicker} from 'rc-date-core'// use dark skinimport Styles from './node_modules/rc-date-core/dist/darkInput.css'class Demo extends React.Component{ constructor(){ this.state = { value: '2016/03/01' inputValue: '2016/03/02' } } render(){ return ( <div> <DatePicker ref="datepicker" mode="day" min="2016/01/01" max="2016/11/01" value={this.state.value} onChange={(v)=>{this.setState({value: v})}} /> <DatePickerInput mode="day" min="2016/01/01" max="2016/11/01" value={this.state.inputValue} readOnly={true} autoPosition={true} container={window} preferPosition="bottomRight" closeOnSelect={true} closeOnClickOutside={true} onChange={(v)=>{this.setState({inputValue: v})}} /> </div> ) }}