elementui datePicker结束时间大于开始时间,精确到时分秒

研发中,大家肯定会遇到活动时间,结束时间大于开始时间,datepicker中type:datetime/datetimerange,可以很方便的实现。但是修改时开始时间不可编辑,结束时间可以编辑的情况下,datetime/datetimerange就很麻烦。

------template-----

<el-form-item label="" prop="startTime">
    <el-date-picker
        v-model="ruleForm.startTime"
        type="datetime"
        :picker-options="starttime"
        placeholder="开始时间"
        />
</el-form-item> 
<span class="marleft_10 marright_10">~</span> 
<el-form-item prop="endTime">
     <el-date-picker
        v-model="ruleForm.endTime"
        type="datetime"
        :picker-options="endtime"
        placeholder="结束时间"
        />
</el-form-item>



-------script-----

----data----
  ruleForm:{
    startTime: '',
    endTime: '',
  }

----computed----
  // 开始时间小于结束时间
  // 结束时间大于开始时间,且大于当前时间
  computed: {
    starttime() {
      let str = "", strtime = '';
      let startTimeDate = this.$moment(this.ruleForm.startTime).format("YYYY-MM-DD");
      if (this.ruleForm.endTime) {
        let endTimeDate = this.$moment(this.ruleForm.endTime).format("YYYY-MM-DD");
        if (startTimeDate == endTimeDate) {
          str = this.$moment(this.ruleForm.endTime).format("HH:mm:ss");
        } else {
          str = "23:59:59"
        }
        strtime = "00:00:00 - " + str
      } else {
        strtime = "00:00:00 - 23:59:59"
      }
      return {
        disabledDate: (time) => {
          if (this.ruleForm.endTime) {
            return (
              time.getTime() > new Date(this.ruleForm.endTime).getTime() - 8.64e6  // 加- 8.64e6则表示包当天
            )
          } 
          // else {
            // return time.getTime() < Date.now()- 8.64e7
          // }
        },
        selectableRange: strtime
      }
    },
    // 结束时间
    endtime() {
      let str = "", strtime = '';
      let endTimeDate = this.$moment(this.ruleForm.endTime).format("YYYY-MM-DD");
      let nowTimeDate = this.$moment(new Date().getTime()).format("YYYY-MM-DD");
      if (this.ruleForm.startTime) {
        let startTimeDate = this.$moment(this.ruleForm.startTime).format("YYYY-MM-DD");
        if (startTimeDate == endTimeDate) {
          if (endTimeDate == nowTimeDate) {
            str = this.$moment(new Date().getTime()).format("HH:mm:ss");
          } else {
            str = this.$moment(this.ruleForm.startTime).format("HH:mm:ss");
          }
        } else if (nowTimeDate == endTimeDate) {
          str = this.$moment(new Date().getTime()).format("HH:mm:ss");
        } else {
          str = "00:00:00"
        }
      } else {
        if (nowTimeDate == endTimeDate) {
          str = this.$moment(new Date().getTime()).format("HH:mm:ss");
        } else {
          str = "00:00:00"
        }
      }
      strtime = str + " - 23:59:59"
      return {
        disabledDate: (time) => {
          if (this.ruleForm.startTime) {
            return (
              time.getTime() < Date.now() - 8.64e7 || time.getTime() < new Date(this.ruleForm.startTime).getTime() - 8.64e7 // 加- 8.64e7则表示包当天
            )
          } else {
            return time.getTime() < Date.now() - 8.64e7
          }
        },
        selectableRange: strtime
      }
    },
  },
            

猜你喜欢

转载自blog.csdn.net/ly2983068126/article/details/119809009