elementui 日期选择器单选多选都可以控制时间（原理）

最新推荐文章于 2024-05-24 16:06:09 发布

颜笑·

最新推荐文章于 2024-05-24 16:06:09 发布

阅读量2k

点赞数

分类专栏：前端 js 文章标签： elementui css html

本文链接：https://blog.youkuaiyun.com/init_yanxiao/article/details/120840469

版权

前端同时被 2 个专栏收录

62 篇文章

订阅专栏

11 篇文章

订阅专栏

这篇博客详细介绍了如何在前端开发中使用Element UI的日期选择器组件el-date-picker，通过设置picker-options属性来限制用户选择的日期范围。内容包括如何使用dayjs库进行日期比较，以及如何设置disabledDate函数，确保用户只能在特定月份内选择日期，从而实现开始和结束日期的限制。这对于前端表单验证和数据输入控制具有实际应用价值。

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

<el-date-picker
        v-model="value1"
        align="right"
        type="date"
        placeholder="选择日期"
        format="MM月DD日"
        :picker-options="{
          disabledDate(time){
              //  参数 time 是日期选择器中的每一天，所以不管是多选还是单选的选择器都可以进行开始和结
              //  束时间的限制的
       return !( // timeOption 的值是 2021-10-18 starOf是拿到第一天，end是拿到一个月最后一天
            (dayjs(time) >= dayjs(timeOption).startOf('month')) && (dayjs(time) <= dayjs(timeOption).endOf('month'))
          )
          },
        }"
      >
      </el-date-picker>