<el-date-picker> 设置可选时间的上下限

You can use the picker-options attribute to set the minimum and maximum allowed dates for an el-date-picker. Here's an example:

html 复制代码
<template>
  <el-date-picker
    v-model="selectedDate"
    :picker-options="pickerOptions"
    type="date"
    placeholder="Select date"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
        selectedDate: null,
        pickerOptions: {
          disabledDate(time) {
            const minDate = new Date();
            minDate.setHours(0, 0, 0, 0); // set minimum date to start of today
            const maxDate = new Date();
            maxDate.setDate(maxDate.getDate() + 7); // set maximum date to 7 days from today's date
            return time.getTime() < minDate.getTime() || time.getTime() > maxDate.getTime();
          }
        }
    };
  }
};
</script>

In the example above, the pickerOptions object is used to set a disabledDate function which disables all dates before the start of today (minDate) and after 7 days from today's date (maxDate). You can adjust these values to fit your specific needs.

相关推荐
顺凡14 小时前
删一个却少俩:Antd Tag 多节点同时消失的原因
前端·javascript·面试
前端大卫15 小时前
动态监听DOM元素高度变化
前端·javascript
Cxiaomu15 小时前
React Native App 图表绘制完整实现指南
javascript·react native·react.js
qq. 280403398415 小时前
vue介绍
前端·javascript·vue.js
Mr.Jessy15 小时前
Web APIs 学习第五天:日期对象与DOM节点
开发语言·前端·javascript·学习·html
速易达网络16 小时前
HTML<output>标签
javascript·css·css3
!win !17 小时前
前端跨标签页通信方案(上)
前端·javascript
xw517 小时前
前端跨标签页通信方案(上)
前端·javascript
全栈前端老曹17 小时前
【前端组件封装教程】第3节:Vue 3 Composition API 封装基础
前端·javascript·vue.js·vue3·组合式api·组件封装
BruceeLeee17 小时前
关于vue3中使用el-upload组件上传图片后删除和预览按钮不显示的问题
vue.js