178  
查询码:00000609
iView中DatePicker设置开始时间和结束时间约束
作者: 郁冲冲 于 2020年11月27日 发布在分类 / 人防组 / 人防前端 下,并于 2020年11月27日 编辑
DatePicker 时间约束

<FormItem label="">
   <Row>
     <Col span="11">
       <DatePicker type="date" :options="startTimeOptions" @on-change="startTimeChange" placeholder="开始时间"
            v-model="starttime"></DatePicker>
     </Col>
     <Col span="2" style="text-align: center">-</Col>
     <Col span="11">
     <DatePicker type="date" :options="endTimeOptions" @on-change="endTimeChange" placeholder="结束时间"
            v-model="endtime"></DatePicker>
     </Col>
   </Row>

</FormItem>

/**
     * 设置开始时间
     */
    startTimeChange(e, index) {
      this.innerInfo.attackEnemySituationList[index].startTime = e;
      this.endTimeOptions = {
        disabledDate: (date) => {
          let startTime = this.innerInfo.attackEnemySituationList[index]
            .startTime
            ? new Date(
                this.innerInfo.attackEnemySituationList[index].startTime
              ).valueOf()
            : "";
          return date && date.valueOf() < startTime && startTime != "";
        },
      };
    },

    /**
     * 设置结束时间
     */
    endTimeChange(e, index) {
      this.innerInfo.attackEnemySituationList[index].attackTime = e;
      let attackTime = this.innerInfo.attackEnemySituationList[index].attackTime
        ? new Date(
            this.innerInfo.attackEnemySituationList[index].attackTime
          ).valueOf() -
          1 * 24 * 60 * 60 * 1000
        : "";
      this.startTimeOptions = {
        disabledDate(date) {
          return date && date.valueOf() > attackTime && attackTime != "";
        },
      };
    },



 推荐知识

 历史版本

修改日期 修改人 备注
2020-11-27 10:29:38[当前版本] 郁冲冲 1.1.0
2020-11-27 10:27:13 郁冲冲 1.1.0

知识分享平台 -V 4.8.7 -wcp