iview中日期选择器DatePicker- - 限制选择年份范围

最新推荐文章于 2024-04-16 14:37:35 发布

原创最新推荐文章于 2024-04-16 14:37:35 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#view design

Vue 专栏收录该内容

10 篇文章

订阅专栏

需求：

默认展示当年当月的数据

只允许选择2020年至2022年内的月份，早于2020年，或者大于2022年禁止选择

********* 模板内容 *********
 <DatePicker 
    transfer 
    :options="forbidDate" 
    @on-change="handleChange" 
    v-model="currentMonth" 
    format="yyyy-MM" 
    type="month" 
    placeholder="请选择日期" 
    style="width: 200px" />

********* data内数据 *********
 currentMonth: '',  // 当前月份

 forbidDate:{
        disabledDate(date){
          const disabledDate = date.getFullYear()
          return ( disabledDate < 2020 || disabledDate > 2022 )
        }
 }

***********  js ***********
 mounted() {
    this.init()
 },

 methods: {
    init() {
      this.getCurrentYear()
    },

    // 获取当前年月份
    getCurrentYear() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      this.currentMonth = `${year}/${month}`

    },

    handleChange(date){
      this.currentMonth = date
    },
 },

展示效果：