element日期选择器时间禁用，日期跨度30天可选范围当天

最新推荐文章于 2024-08-08 17:17:58 发布

原创最新推荐文章于 2024-08-08 17:17:58 发布 · 379 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

本文介绍了一种使用Element UI库实现的日期选择器组件配置方法，该组件能够设置开始时间和结束时间，并通过禁用日期功能限制用户只能选择特定范围内的日期。此外，还实现了开始时间和结束时间之间的相互依赖与自动同步，确保了所选日期的有效性和一致性。

<el-row :gutter="20">
  <el-col :span="12">
    <el-row class="searchTimeTitle">{{ $lang('开始时间:') }}</el-row>
    <el-date-picker style="width:200px" v-model="formData.startTime" :picker-options="pickerOptionsStart" :clearable="false"
      :editable="false" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="startChange"
      :placeholder="$lang('选择日期时间')">
    </el-date-picker>
  </el-col>
  <el-col :span="12">
    <el-row class="searchTimeTitle">{{ $lang('结束时间:') }}</el-row>
    <el-date-picker style="width:200px" v-model="formData.endTime" :picker-options="pickerOptionsEnd" :clearable="false"
      :editable="false" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="endChange"
      :placeholder="$lang('选择日期时间')">
    </el-date-picker>
  </el-col>
</el-row>

pickerOptionsStart: {
  disabledDate: (time) => {
    const space = 365 * 24 * 3600 * 1000
    const minTime = new Date().getTime() - space
    const maxTime = new Date(new Date(new Date().toLocaleDateString()).getTime() - (0 * 24 * 60 * 60 * 1000 - 1))
    return time.getTime() < minTime || time.getTime() > maxTime
  }
},
pickerOptionsEnd: {
  disabledDate: time => {
    const space = 30 * 24 * 3600 * 1000
    const { startTime } = this.formData
    const minTime = startTime ? new Date(startTime).getTime() - (1 * 24 * 3600 * 1000 - 1) : new Date().getTime() - space
    let maxTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 1 * 24 * 60 * 60 * 1000 - 1)
    if (new Date(startTime).getTime() < new Date().getTime() - space) {
      maxTime = new Date(startTime).getTime() + space
    }
    return time.getTime() < minTime || time.getTime() > maxTime
  }
},

startChange(value) {
  const { endTime } = this.formData
  const space = 30 * 24 * 3600 * 1000
  if (new Date(value).getTime() + space < new Date(endTime).getTime() || new Date(value).getTime() > new Date(endTime).getTime()) {
    this.formData.endTime = dayjs(value).format('YYYY-MM-DD')
  }
  this.formData.startTime = dayjs(value).format('YYYY-MM-DD')
},
endChange(value) {
  this.formData.endTime = dayjs(value).format('YYYY-MM-DD')
},