el-date-picker默认展示最近七天以及设置可选日期选择最大跨度

znavdn

已于 2022-07-15 15:19:29 修改

阅读量3.9k

点赞数 1

文章标签： vue.js elementui javascript

于 2022-07-15 15:18:51 首次发布

本文链接：https://blog.youkuaiyun.com/znavdn/article/details/125804787

版权

本文介绍了如何在Vue.js项目中使用ElementUI的el-date-picker组件实现两个功能：一是设置日期选择的最大跨度为180天并允许选择过去日期；二是让组件默认展示最近包括当天在内的7天。通过配置picker-options的onPick回调和disabledDate属性，以及提供一个formatDate的辅助方法来完成这些需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-date-picker组件内容

          <el-date-picker
            v-model="timeValue"
            size="small"
            type="datetimerange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="handleDateChange"
          />

需求一：日期最大跨度180天，可选过去日期。

在picker-options属性中， onPick 是选中日期后会执行的回调，disabledDate设置第一次选中的时间禁用日期，需要要先拿到第一次选的时间。

      pickerOptions: {
        pickerMinDate: '', // 第一次选中的时间
        onPick: obj => {
          this.pickerMinDate = new Date(obj.minDate).getTime()
        },
        disabledDate: time => {
          if (this.pickerMinDate) {
            const day1 = 180 * 24 * 3600 * 1000
            const maxTime = this.pickerMinDate + day1
            const minTime = this.pickerMinDate - day1
            return time.getTime() > maxTime || time.getTime() < minTime
          }
        },
      }

需求二：默认展示最近7天，日期含当天。

//这段代码与上面el-date-picker组件对应
data(){
  return {
  timeValue: [],
  form: {
        beginDate: '',
        endDate: '',
      },
  }
}
  created() {
    this.getDefaultTime()
  },
  methods: {
    getDefaultTime() {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      this.timeValue = [start, end]
      this.form.beginDate = formatDate(Date.parse(start), 'yyyy-MM-dd') //formatDate为自己封装的格式化时间方法
      this.form.endDate = formatDate(Date.parse(end), 'yyyy-MM-dd')
      this.pickerMinDate = this.form.beginDate
    },
}
    // 重置
    resetForm() {
      this.timeValue = []
      this.getDefaultTime()
    },
    // 日期
    handleDateChange(e) {
      this.form.beginDate = e[0]
      this.form.endDate = e[1]
    },

封装格式化时间的formatDate方法代码，在使用的界面import{}引入后直接使用即可：

// 格式化时间
export function formatDate(timestamp, formater) {
  const date = new Date()
  date.setTime(parseInt(timestamp))
  //  传入formater形式 yyyy-MM-dd yyyy-MM-dd hh:mm
  formater = (formater != null) ? formater : 'yyyy-MM-dd'
  const Format = function(fmt) {
    var o = {
      'M+': date.getMonth() + 1, // 月
      'd+': date.getDate(), // 日
      'h+': date.getHours(), // 小时
      'm+': date.getMinutes(), // 分
      's+': date.getSeconds(), // 秒
      'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
      'S': date.getMilliseconds() // 毫秒
    }

    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    for (var k in o) {
      if (new RegExp('(' + k + ')').test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1)
          ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
      }
    }
    return fmt
  }
  return Format(formater)
}