日期组件限制时间范围

最新推荐文章于 2024-07-07 15:29:40 发布

铁血猪刚鬣

最新推荐文章于 2024-07-07 15:29:40 发布

阅读量701

点赞数

分类专栏：功能文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44583871/article/details/124861805

版权

该博客主要介绍如何在Vue.js前端项目中实现日期组件的限制功能，包括阻止用户选择当前时间之后的日期以及在日期范围组件中设置最大可选时间为前后一个月。

摘要由CSDN通过智能技术生成

1.日期组件限制不可选当前时间之后的日期

    <el-date-picker
                v-model="value1"
                :picker-options="pickerBeginDateBefore"
                :clearable="false"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              />

//data初始化
  pickerBeginDateBefore: {
        disabledDate(time) {
          return time.getTime() >= (Date.now())
        }
      },

2.日期范围组件在点击后最多选前后一个月的时间范围

	     <el-date-picker
            v-model="time"
            type="daterange"
            :clearable="false"
            :picker-options="pickerOptions2"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss" 
          >
          </el-date-picker>
//data初始化
  pickerOptio