移动端时间选择组件

import DatePicker from 'react-mobile-datepicker';

 

使用

<Datepacks defaultValue={queryMonth.endDate} minDate={queryMonth.startDate} onSelect={val=>{this.selectDate("endDate",val)}}/>

/*表单输入选择框改变时的事件 */

changes(val,keyName){

this.setState({

[keyName]:val,

})

},

/* 下拉时间组件  */
const Datepacks = React.createClass({
    getInitialState(){
        return {
            dataOpen: false,
        }
    },
    handleSelect(value){
        if(this.props.keyName){
            this.props.onSelect(togetdate(value),this.props.keyName);
            this.setState({dataOpen: false })
        }else{
            this.props.onSelect(togetdate(value));
            this.setState({dataOpen: false })
        }
    },
    render(){
        const {dataOpen}=this.state;
        const {defaultValue="",dateFormat=['YYYY','MM','DD'],className="",minDate="",maxDate=""}=this.props;
        const time=defaultValue==""?new Date():new Date(defaultValue);
        const minDates=minDate==""?new Date(1970, 0, 1):new Date(gettoday(minDate).currYear, gettoday(minDate).currmonth, gettoday(minDate).currday)
        const maxDates=maxDate==""?new Date(2050, 0, 1):new Date(gettoday(maxDate).currYear, gettoday(maxDate).currmonth, gettoday(maxDate).currday)
        return (
        <div onClick={()=>this.setState({dataOpen: true })} style={{height:"100%"}} >
            <DatePicker dateFormat={dateFormat} theme="ios" min={minDates} max={maxDates} value={time} isOpen={dataOpen} onSelect={val=>this.handleSelect(val)} onCancel={()=>this.setState({dataOpen: false })} />
            <p className="middle fn-center">{defaultValue}</p>
        </div>
    )
    }
})