el-date-picker默认选择当前月及往前11个月，禁止当月之后的数据

最新推荐文章于 2026-06-17 22:13:19 发布

原创最新推荐文章于 2026-06-17 22:13:19 发布 · 3.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #前端框架

工作遇到的bug 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种实现方案，用于限制用户在日期选择器中仅能选择当前及过去11个月份，并禁用未来月份的选择。通过自定义Vue日期选择器组件的功能，确保了用户只能在指定范围内进行选择。

项目场景：

例如：需求是默认显示当前月，以及当前月之前个月的数据，禁止选择但当月之后月份。

解决方案：

<el-date-picker
 v-model="valueDate"
:clearable="false"
type="monthrange"
:editable="false"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
:picker-options="pickerOptions"
 @blur="getTime"
/>

  data(){
       return{
   valueDate: [], // 报警时间
   pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          if (minDate && !maxDate) {
            this.startDate = new Date(minDate)
          } else {
            this.startDate = ''
          }
        },
        disabledDate: (time) => {
          if (this.startDate) {
            const startMonth = this.startDate.getMonth()
            const maxDate = new Date(this.startDate)
            const maxMonth = startMonth + 11
            maxDate.setMonth(maxMonth)
            const minDate = new Date(this.startDate)
            const minMonth = startMonth - 11
            minDate.setMonth(minMonth)
            return time.getTime() > Date.now() || time.getTime() > maxDate.getTime() || time.getTime() < minDate.getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
        }
   }

  created() {
    Date.prototype.format = formatDate //这是一个公用的方法
    this.valueDate[0] = new Date(new Date().getFullYear(), new Date().getMonth() - 11, 1).format('yyyy-MM')
    this.valueDate[1] = new Date(new Date().getFullYear(), new Date().getMonth(), 1).format('yyyy-MM')
    this.searchForm.startTime = this.valueDate[0]
    this.searchForm.endTime = this.valueDate[1]
  },

月份发生改变的时候拿到最新的月份数据

    // 失去焦点拿到组件的时间
    getTime() {
      Date.prototype.format = formatDate
      this.searchForm.startTime = this.valueDate[0]
      this.searchForm.endTime = this.valueDate[1]
      // console.log(this.valueDate, this.searchForm.endTime)
      console.log('开始月份', this.searchForm.startTime)
      console.log('结束月份', this.searchForm.endTime)
    },

公用的时间转换方法：

// 使用的时候直接引入到页面就可以了
export function formatDate(fmt) {
  const o = {
    'M+': this.getMonth() + 1, // 月份
    'd+': this.getDate(), // 日
    'h+': this.getHours(), // 小时
    'm+': this.getMinutes(), // 分
    's+': this.getSeconds(), // 秒
    'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
    'S': this.getMilliseconds() // 毫秒
  }
  if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length)) }
  for (const 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
}