/** * 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> ) } }