element-ui 日期选择器如何限制只能从今天开始往后推一个月，超过一个月不能选择，也就是以今天为中心，只能向后面选择30天，同时不能选择超过今天的日期

本文链接：https://blog.csdn.net/w1404273025/article/details/134644090

问题描述：
element-ui 日期选择器如何限制只能从今天开始往后推一个月，超过一个月不能选择，也就是以今天为中心，只能向后面选择30天，同时不能选择超过今天的日期？
例如：今日日期为2023-11-27，我只能选择2023-11-27之前的日期，2023-10-29为止
在这里插入图片描述

知识点：
element-ui日期选择组件地址：http://element-cn.eleme.io/#/zh-CN/component/date-picker

picker-options：当前时间日期选择器特有的选项，类型object

disabledDate：设置禁用状态，参数为当前日期，要求返回 Boolean，类型Function

onPick：选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效，类型Function({ maxDate, minDate })

解决办法：

<head>
    <meta charset="UTF-8">
    <title>element-ui 关于日期范围选择控件，如何限制只能选择30天</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div>
    <div id="app">
        <el-date-picker
                label="时间:" prop="time" required :rules="[
            { type: 'date', required: true, message: '时间不能为空' }
        ]">
        </el-date-picker>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function() {
      return {
            pickerMinDate: dayjs(),
            pickerOptions: {
                onPick: (obj) => {
                    this.pickerMinDate = dayjs();
                },
                disabledDate: (time) => {
                    if (this.pickerMinDate) {
                        const day30 = 30 * 24 * 3600 * 1000
                        let maxTime = dayjs()
                        let minTime = dayjs() - day30
                        return time.getTime() > maxTime || time.getTime() < minTime || time.getTime() > Date.now() * 24 * 3600 * 1000
                    } else {
                        return time.getTime() > Date.now() + 30 * 24 * 3600 * 1000
                    }
                }
            },
        }
      }
    }
  })
</script>
</html>