iview datePicker指定的范围内时间可选其余禁用

最新推荐文章于 2024-01-29 10:58:13 发布

Dream_rever

最新推荐文章于 2024-01-29 10:58:13 发布

阅读量590

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_60522381/article/details/122574144

版权

父组件传过来的年份时间范围，例如时间范围是2001-2020年

template：

js：

template：
    <DatePicker
        transfer
          :open="open" //是否显示组件的
          :value="item.year" //可以显示传入的开始年份
          :options="forbidDate"
          @on-change="handleChange"
          type="year"
        >
        //页面最初只显示图标点击图标显示年份组件
          <img
            class="image-style"
            src="../../assets/image/right/time.svg"
            @click="handleClick()"
            alt=""
          />
   </DatePicker>



data数据：
forbidDate: {
      disabledDate:  (date) =>{
　        //获取当前的年份
          let endYear = this.item.product.dates[this.item.product.dates.length-1]
          const disabledDay = date.getFullYear();
          return (disabledDay < this.item.year || disabledDay > endYear);
      }
    }

js 方法：
//组件显隐
handleClick() {
  this.open = !this.open;
},
//改变数据
handleChange(date) {
      this.year = date;
    },

最后效果：