MobileDate.jsx 2.9 KB
Newer Older
徐立's avatar
徐立 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
/**
 * 2019年10月23日
 * 移动端日期选择封装
 */
import React, { Component } from 'react'
import { DatePicker, List, Button, InputItem, Modal } from 'antd-mobile';
import moment from 'moment'
export default class MobileDate extends Component {
    constructor(props){
        super(props)
        const value = props.value ||[];
        
        this.state = {
            dates:value
        }
    }
    triggerChange = (changedValue) => {
        // Should provide an event to pass value to Form.
        const onChange = this.props.onChange;
        
        if (onChange) {
          onChange(changedValue);
        }
      }
    componentWillReceiveProps(nextProps) {
        // Should be a controlled component.
        if ('value' in nextProps) {
            const value = nextProps.value;
            this.setState({dates:value});
        }
    }
    handelStartChange = (date) => {
        const {dates}=this.state
      
        if(dates.length==0){
            dates.push(moment(date.valueOf()))
        }else{
            dates[0]=moment(date.valueOf())
        }
        
        if (!('value' in this.props)) {
            this.setState({dates});
          }
          this.triggerChange(dates);
      
    }
    handelEndChange = (date) => {
        const {dates}=this.state
        if(dates.length==0){
            dates.push(null)
            dates.push(moment(date.valueOf()))
        }else if(dates.length==1){
            dates.push(moment(date.valueOf()))
            
        }else{
            dates[1]=moment(date.valueOf())
        }
        if (!('value' in this.props)) {
            this.setState({dates});
          }
          this.triggerChange(dates);
      
        
    }
    render() {
        let {dates} = this.state
        
        const startTime=dates.length>0?dates[0].valueOf():null
        const endTime=dates.length>1?dates[1].valueOf():null
       
        return (
            <div>
                <DatePicker
                // value={this.state.date}
                extra={<span style={{fontSize:14}}>{!!startTime?moment(startTime).format('YYYY-MM-DD HH:mm:ss'):'请选择时间'}</span>}
                locale={{okText:"确定",dismissText:'取消'}}
                value={ !!startTime?new Date(startTime):null}
                onChange={date => this.handelStartChange(date)}
                >
                <List.Item arrow="horizontal">开始时间</List.Item>
                </DatePicker>
                <DatePicker
                // value={this.state.date}
                extra={<span style={{fontSize:14}}>{!!endTime?moment(endTime).format('YYYY-MM-DD HH:mm:ss'):'请选择时间'}</span>}
                value={!!endTime?new Date(endTime):null}
                locale={{okText:"确定",dismissText:'取消'}}
                onChange={date => this.handelEndChange(date)}
                >
                <List.Item arrow="horizontal">结束时间</List.Item>
                </DatePicker>
            </div>
        )
    }
}