element时间限制当前最大最小

最新推荐文章于 2023-09-05 15:04:45 发布

原创最新推荐文章于 2023-09-05 15:04:45 发布 · 944 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #vue.js

本文介绍如何使用Element UI的日期选择器实现时间限制，确保计划开始时间和结束时间在指定的6个月到1年范围内，并结合JavaScript方法动态计算可选时间范围。

element时间限制当前最大最小

element 时间选择组件
<el-form-item label="计划开始时间">
<el-date-picker
	v-model="form.publishingStartDate"
	placeholder="选择计划开始时间"
	type="datetime"
	format="yyyy-MM-dd HH:mm"
	value-format="yyyy-MM-ddTHH:mm"
	:picker-options="pickerOptions0"
/>
</el-form-item>
<el-form-item label="计划结束时间">
<el-date-picker
	v-model="form.publishingExpirationDate"
	type="datetime"
	format="yyyy-MM-dd HH:mm"
	value-format="yyyy-MM-ddTHH:mm"
	placeholder="选择计划结束时间"
	:picker-options="startPickerOptions"
/>
</el-form-item>

methods方法里两个参数，第一个值为当前时间，第二个为计划开始时间

methods: {
    time(monthData = 3, defaultDate) {
      const date = defaultDate ? new Date(defaultDate) : new Date(defaultDate)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      const countDown = 12 - monthData
      if (month <= countDown) {
        month += monthData
      } else if (month > countDown) {
        year += 1
        month = month - 12 + monthData
      }
      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      const time = year + '-' + month + '-' + day
      return time
    },```
}
data里定义时间限制
startPickerOptions: {
        disabledDate: (time) => {
          // 小于最小时间或者大于最大时间都不可选
          return time.getTime() < this.minTime - 24 * 3600000 || time.getTime() > this.maxTime - 24 * 3600000
        }
},
计算属性记录最小最大时间 (this.form.publishingStartDate是计划开始时间的表单)
computed ：{
minTime: {
      get() {
        if (this.form.publishingStartDate) {
          return new Date(this.time(6, this.form.publishingStartDate)).getTime()
        } else {
          return new Date(this.time(6)).getTime()
        }
      }
    },
    maxTime: {
      get() {
        if (this.form.publishingStartDate) {
          return new Date(this.time(12, this.form.publishingStartDate)).getTime()
        } else {
          return new Date(this.time(12)).getTime()
        }
      }
    }
}