VUE学习所遇问题【el-date-picker】限制了时间范围,就无法使用'此刻'按钮的效果

最开始遇到的问题是:
el-date-picker组件需要只能选择昨天与今天的时间信息
初版代码:
<el-date-picker
    v-model="formData.withdrawTime"
    type="datetime"
    placeholder="请选择时间"
    :picker-options="datetimePickerOptions"
     format="yyyy-MM-dd HH:mm:ss"
     value-format="yyyy-MM-dd HH:mm:ss"
     clearable
     @change="onWithdrawTimeChange"                   
/>
datetimePickerOptions: {
        disabledDate(time) {
          const now = new Date();
          now.setHours(0, 0, 0, 0); // 清除时分秒
          return time.getTime() > now.getTime() || time.getTime() < now.setDate(now.getDate() - 1); // 限制只能选择昨天或今天
        },
      },

但需要的问题是,此组件有个此刻按钮,点击了没有赋值。

经一番查询发现如果设置了禁止选择未来日期,可能会导致‘此刻’按钮无响应。所以找到了一个共存的办法,既能限制日期,又能点击此刻按钮,代码如下datetimePickerOptions: {        disabledDate(time) {

          const now = new Date();
          const endOfToday = new Date();
      //定义当天的结束时间 endOfToday.setHours(
23, 59, 59, 999);
      //定义昨天的开始时间 const startOfYesterday
= new Date(); startOfYesterday.setDate(now.getDate() - 1); startOfYesterday.setHours(0, 0, 0, 0);
      //清零 now 的时间部分 now.setHours(
0, 0, 0, 0); // 清除时分秒
      //禁用条件
return time.getTime() < startOfYesterday.getTime() || time.getTime() > endOfToday.getTime(); }, },

 

posted @ 2024-12-16 16:41  铁铁的收集箱  阅读(29)  评论(0编辑  收藏  举报