Skip to content

W
WebPublic
提交 ce4392d8 authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

22122 【起止时间组件】 没有做限制 结束时间不能小于开始时间 81721020124 284101

上级 30b16231
隐藏空白字符变更
内嵌 并排
正在显示 包含 109 行增加 和 86 行删除
one_stop_public/libs/MobileDate.jsx
浏览文件 @ ce4392d8
...@@ -2,101 +2,124 @@ ...@@ -2,101 +2,124 @@
* 2019年10月23日 * 2019年10月23日
* 移动端日期选择封装 * 移动端日期选择封装
*/ */
import React, { Component } from 'react'; import React, {Component} from 'react';
import { DatePicker, List, Button, InputItem, Modal } from 'antd-mobile'; import {DatePicker, List, Button, InputItem, Toast} from 'antd-mobile';
import moment from 'moment'; import moment from 'moment';
export default class MobileDate extends Component { export default class MobileDate extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
const value = props.value || []; 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 {
if(dates.length === 2){
if (moment(date.valueOf()).isAfter(dates[1], 'second')) {
Toast.fail('结束时间必须在开始时间之后', 1);
return false;
}
}
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()));
this.state = { } else if (dates.length === 1) {
dates: value, if (dates[0].isAfter(moment(date.valueOf()), 'second')) {
}; Toast.fail('结束时间必须在开始时间之后', 1);
} return false;
triggerChange = (changedValue) => { }
// Should provide an event to pass value to Form.
const onChange = this.props.onChange;
if (onChange) { dates.push(moment(date.valueOf()));
onChange(changedValue); } else {
} if (dates[0].isAfter(moment(date.valueOf()), 'second')) {
}; Toast.fail('结束时间必须在开始时间之后', 1);
componentWillReceiveProps(nextProps) { return false;
// 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[1] = moment(date.valueOf());
dates.push(moment(date.valueOf())); }
} else { if (!('value' in this.props)) {
dates[0] = moment(date.valueOf()); this.setState({dates});
} }
this.triggerChange(dates);
};
if (!('value' in this.props)) { render() {
this.setState({ dates }); let {dates} = this.state;
} const {format} = this.props;
this.triggerChange(dates); const startTime = dates.length > 0 ? dates[0] && dates[0].valueOf() : null;
}; const endTime = dates.length > 1 ? dates[1].valueOf() : null;
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 { format } = this.props;
const startTime = dates.length > 0 ? dates[0].valueOf() : null;
const endTime = dates.length > 1 ? dates[1].valueOf() : null;
return ( return (
<div> <div>
<DatePicker <DatePicker
// value={this.state.date} // value={this.state.date}
extra={ extra={
<span style={{ fontSize: 14 }}> <span style={{fontSize: 14}}>
{!!startTime {!!startTime
? moment(startTime).format(format ? format : 'YYYY-MM-DD HH:mm:ss') ? moment(startTime).format(format ? format : 'YYYY-MM-DD HH:mm:ss')
: '请选择时间'} : '请选择时间'}
</span> </span>
} }
locale={{ okText: '确定', dismissText: '取消' }} locale={{okText: '确定', dismissText: '取消'}}
value={!!startTime ? new Date(startTime) : null} value={!!startTime ? new Date(startTime) : null}
format={format ? format : 'YYYY-MM-DD HH:mm:ss'} format={format ? format : 'YYYY-MM-DD HH:mm:ss'}
onChange={(date) => this.handelStartChange(date)}> onChange={(date) => this.handelStartChange(date)}>
<List.Item arrow="horizontal">开始时间</List.Item> <List.Item arrow="horizontal">开始时间</List.Item>
</DatePicker> </DatePicker>
<DatePicker <DatePicker
// value={this.state.date} // value={this.state.date}
extra={ extra={
<span style={{ fontSize: 14 }}> <span style={{fontSize: 14}}>
{!!endTime {!!endTime
? moment(endTime).format(format ? format : 'YYYY-MM-DD HH:mm:ss') ? moment(endTime).format(format ? format : 'YYYY-MM-DD HH:mm:ss')
: '请选择时间'} : '请选择时间'}
</span> </span>
} }
value={!!endTime ? new Date(endTime) : null} value={!!endTime ? new Date(endTime) : null}
locale={{ okText: '确定', dismissText: '取消' }} locale={{okText: '确定', dismissText: '取消'}}
format={format ? format : 'YYYY-MM-DD HH:mm:ss'} format={format ? format : 'YYYY-MM-DD HH:mm:ss'}
onChange={(date) => this.handelEndChange(date)}> onChange={(date) => this.handelEndChange(date)}>
<List.Item arrow="horizontal">结束时间</List.Item> <List.Item arrow="horizontal">结束时间</List.Item>
</DatePicker> </DatePicker>
</div> </div>
); );
} }
} }
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论