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 skin
import 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>
       )
    }
}