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

最新推荐文章于 2024-05-24 15:42:10 发布

溯流2021

最新推荐文章于 2024-05-24 15:42:10 发布

阅读量273

点赞数 1

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/jp2021/article/details/128129659

版权

<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')
},