el-date-picker 限制只能选一个月内

### 设置 `el-date-picker` 组件仅允许选择当前月份内的日期 为了使 `el-date-picker` 组件只允许用户选择当前月份中的日期，可以通过配置 `picker-options` 属性来实现这一功能。具体来说，通过定义 `disabledDate` 方法可以禁用不符合条件的日期。 #### 实现方法： 在 Vue 组件的数据部分定义 `pickerOptions` 对象，并在其内部指定 `disabledDate` 函数用于控制哪些日期不可选。此函数接收一个时间对象作为参数并返回布尔值表示该日期是否可用；如果返回 true，则对应的日期将被禁用。 以下是具体的代码示例[^1]： ```html <template> <div class="date-picker-demo"> <!-- 使用 month 类型的选择器 --> <el-date-picker v-model="selectedMonth" type="month" placeholder="选择月" :picker-options="pickerOptions" > </el-date-picker> <!-- 或者使用 date 类型的选择器 --> <el-date-picker v-model="selectedDate" type="date" placeholder="选择日" :picker-options="pickerOptions" > </el-date-picker> </div> </template> <script> export default { data() { return { selectedMonth: '', selectedDate: '', pickerOptions: { disabledDate(time) { const now = new Date(); // 获取今天的年份和月份 (注意 JavaScript 中 getMonth 返回的是从0开始计数) let currentYear = now.getFullYear(), currentMonth = now.getMonth(); // 创建本月第一天的时间戳 let firstDayOfMonth = new Date(currentYear, currentMonth, 1).getTime(); // 创建下个月的第一天的时间戳 let nextMonthFirstDay = new Date( currentYear, currentMonth + 1, 1 ).getTime(); // 如果传入的时间不在当月范围内则禁用它 return time.getTime() < firstDayOfMonth || time.getTime() >= nextMonthFirstDay; } } }; } }; </script> ``` 这段代码展示了两种类型的日期选择器——一个是按月选择 (`type="month"`),另一个是按日选择(`type="date"`)。对于这两种情况都应用了相同的逻辑去限制用户的选项只为当前月份内有效。