【vue】elementui中,el-date-picker组件只能选择当前年份中的日期

本文详细讲解了如何在Vue.js中使用ElementUI的el-date-picker组件,确保用户只能选择当前所选年份内的日期。通过监听onPick事件获取年份,并结合JavaScript的Date方法设置禁用其他年份的日期。
摘要由CSDN通过智能技术生成

讲解需求:

        当点击的日期中,只能限定在你点击的年份范围内,不得跨年。

举个例子:

         首次点击的开始时间是2022-12-10,那么结束时间不能在2023年或者2021年,只能是2022年范围内的

 讲解过程:

  • 实现前提

        1.需获取到开始时间的年份

        2.开始时间年份的第一天,开始时间年份的最后一天

  • 实现步骤

        第一步,运用组件中的picker-options属性的onPick函数,可以获取当前选择的年份

onPick:({maxDate,minDate}) =>{}); //拿到minDate的值就是年份

        第二步,需运用到js的new Date()方法,正好讲解一下

 new Date();是转为标准时间 -- Sat Jan 01 2022 00:00:00 GMT+0800 (中国标准时间)

getFullYear();根据标准时间转化成月份

getTime();根据标准时间转化从时间戳 

let year = minDate.getFullYear();//当前时间

let startTime = new Date(year,
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值