zoukankan      html  css  js  c++  java
  • antD 结束时间不能大于开始时间最大时间跨度

     handleChange = (value) => {
            this.setState({
                moId: value,
            }, () => {
                const param = {
                    moId: value
                }
                this.api.projectManage.querybndHours(param).then(res => {
                   
                    this.setState({
                        minHours: res,
                        siStartTime: null,
                        siEndTime: null,
                    });
                    this.props.onFieldChange({
                        siStartTime: {
                            value: null,
                        },
                        siEndTime: {
                            value: null,
                        },
                    });
                })
            });
        };
    
        onStartChange = (value) => {
            this.setState({
                siStartTime: value,
                siEndTime: null,
            });
            this.props.onFieldChange({
                siStartTime: {
                    value: value,
                },
                siEndTime: {
                    value: null,
                },
            });
        };
    
        onEndChange = (value) => {
            this.setState({
                siEndTime: value,
            });
            this.props.onFieldChange({
                siEndTime: {
                    value: value,
                },
            });
        };
    
        disabledStartDate = (startValue) => {
            const endValue = this.state.siEndTime;
            if (!startValue || !endValue) {
                return startValue.valueOf() > new Date().getTime();
            }
            return startValue.valueOf() > endValue.valueOf();
        };
      // 重点
        disabledEndDate = (endValue) => {
            const { minHours } = this.state
            const startValue: any = this.state.siStartTime;
            if (!endValue || !startValue) {
                return endValue.valueOf() > new Date().getTime();
            }
            // 结束日期不能大于开始日期最大时间跨度 minHours
            return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() > new Date().getTime() || endValue.valueOf() - startValue.valueOf() > 24*60*60*1000*(minHours/24);
        };
        range = (start, end)=>{
            const result = [];
            for (let i = start; i < end; i++) {
              result.push(i);
            }
            return result;
          }
        disabledRangeTime = () => {
            const { minHours } = this.state
            const startValue: any = this.state.siStartTime;
            let H:any = moment(startValue).add(minHours, 'hours').format('H');
                H = Number(H) + 1;
            const M:any = moment(startValue).add(minHours, 'hours').format('m');
            const S:any = moment(startValue).add(minHours, 'hours').format('s');
            return {
                disabledHours: () => this.range(0, 60).splice(H, 20),
                disabledMinutes: () => this.range(M, 60),
                disabledSeconds: () => this.range(S, 60),
              };
        }
    
     <FormItem label="初始时间">
                            {getFieldDecorator('siStartTime', {
                                initialValue: siStartTime ? moment(siStartTime) : null,
                                rules: [
                                    {
                                        required: true,
                                        message: '请选择初始时间',
                                    },
                                ],
                            })(
                                <DatePicker
                                    placeholder="请选择初始时间"
                                    showTime
                                    onChange={this.onStartChange}
                                    allowClear={false}
                                    disabledDate={this.disabledStartDate}
                                />
                            )}
                        </FormItem>
                        <FormItem label="结束时间">
                            {getFieldDecorator('siEndTime', {
                                initialValue: siEndTime ? moment(siEndTime) : null,
                                rules: [
                                    {
                                        required: true,
                                        message: '请选择结束时间',
                                    },
                                ],
                            })(
                                <DatePicker
                                    placeholder="请选择结束时间"
                                    showTime
                                    onChange={this.onEndChange}
                                    allowClear={false}
                                    disabledDate={this.disabledEndDate}
                                    disabledTime={this.disabledRangeTime}
                                />
                            )}
                        </FormItem>
    

      

  • 相关阅读:
    EasyUI DataGrid及Pagination
    Easyui Datagrid的Rownumber行号显示问题
    Easyui控制combotree只能选择叶子节点
    Easyui datebox单击文本框显示日期选择
    EasyUI DataGrid可编辑单元格
    EasyUI获取DataGrid中某一列的所有值
    EasyUI DataGrid 多级表头设置
    EasyUI DataGrid 编辑单元格
    EasyUI combobox 加载JSON数据《一》
    EasyUI combobox 加载JSON数据
  • 原文地址:https://www.cnblogs.com/whlBooK/p/13672837.html
Copyright © 2011-2022 走看看