el-date-picker时间选择器 限制一个月 一年内 在今天之前

本文介绍了一种JavaScript日期选择器组件pickerOptions中的onPick和disabledDate方法,如何通过这些API实现动态日期限制,确保用户只能选择当前日期及未来一年内的日期。开发者可以借此避免无效日期输入,提升用户体验。

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

       pickerOptions: {
          onPick: ({
            maxDate,
            minDate
          }) => {
            this.cuttentTime = minDate.getTime()
            if (maxDate) {
              this.cuttentTime = ''
            }
          },
          disabledDate: (time) => {
            //先限制今天之前
            if (time.getTime() > Date.now()) {
              return true;
            }
            if (this.cuttentTime != '') {
              //一年以内
              const one = 365 * 24 * 3600 * 1000
              //月份为30 * 24 * 3600 *1000
              const minTime = this.cuttentTime - one
              const maxTime = this.cuttentTime + one
              return time.getTime() < minTime || time.getTime() > maxTime
            }
          }
        },

### 设置 `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"`)。对于这两种情况都应用了相同的逻辑去限制用户的选项只为当前月份内有效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值