Element组件库 DatePicker 日期选择器范围处理

在Vue.js的应用中,官方文档提供了一种方法来限制日期选择器的范围。例如,可以设置只能选择从30天前到今天的日期,或者只能从今天开始选择未来30天的日期。这通过在data对象中定义pickerOptions,并在disabledDate函数内比较时间戳来实现。

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

很多时候会有要求选择日期的范围

 官方文档提供了

 

 

data(){
    pickerOptions: {
        disabledDate(time) {
           const today = new Date();
           const maxDate = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000); 
           const minDate = new Date(today.getTime() - 1 * 24 * 60 * 60 * 1000); 
                                //只能选择今天开始到30天后的范围
           return time.getTime() < minDate.getTime() || time.getTime() > maxDate.getTime();
            //minDate 最早只能选到哪天       //maxDate最晚只能选到哪天 
     }
   }
}
                                //只能选择30天前到今天的范围
           const maxDate = new Date(today.getTime() ); 
           const minDate = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000);  

data(){
    pickerOptions: {
        disabledDate(time) {
           return time.getTime() < Date.now()- 24 * 60 * 60 * 1000
           //限制为只能从今天开始选择
          }
     }
}

解决!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值