elementsui如何让日期时间选择器结束时间和开始时间只能选择同一天

Question

 

Answer 1

    <el-col :span="8"
          ><el-form-item
            label="演练开始日期"
            prop="startTime"
            :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]"
          >
            <el-date-picker
              v-model="addDrillRecordRow.startTime"
              class="baseInput"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              :picker-options="pickerOptionsStart"
            ></el-date-picker></el-form-item
        ></el-col>
        <el-col :offset="1" :span="8"
          ><el-form-item
            label="演练结束日期"
            prop="endTime"
            :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]"
          >
            <el-date-picker
              v-model="addDrillRecordRow.endTime"
              class="baseInput"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              :picker-options="pickerOptionsEnd"
            ></el-date-picker></el-form-item
        ></el-col>

//时间限制，符合日期先后顺序的实际情况
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.addDrillRecordRow.endTime) {
            return (
              time.getTime() > Date.now() - 8.64e6 ||
              time.getTime() > this.addDrillRecordRow.endTime  /*开始日期要在选择的结束日期之前*/
            );
          }
          // return time.getTime() < Date.now() - 8.64e7; /*今天及以后*/
          return time.getTime() > Date.now() - 8.64e6; /*今天及之前，注意数字不一样*/
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.addDrillRecordRow.startTime) {
            return (
              time.getTime() > Date.now() - 8.64e6 ||
              time.getTime() < this.addDrillRecordRow.startTime /*结束日期要在选择的开始日期之后*/
            );
          }
          return time.getTime() > Date.now() - 8.64e6; /*今天及之前*/
        }
      }