elementui日期选择器仅选择当日且限制当天时间内可选

下下雨洒洒水啦

已于 2024-04-18 13:39:20 修改

阅读量323

点赞数 2

文章标签： elementui 前端 javascript

于 2024-04-18 13:38:36 首次发布

本文链接：https://blog.csdn.net/2301_76658376/article/details/137918044

版权

文章描述了如何使用JavaScript在日期选择器中设置功能，仅允许用户选择当天以及当天晚上10点之前的日期。它通过`disabledDate`函数动态禁用超过指定时间的日期选项。

摘要由CSDN通过智能技术生成

仅选择当天日期

<script>
export default {
  data() {
    return {
      pickedDate: '', // 这是你的日期选择器绑定的变量
      pickerOptions: {
        disabledDate(time) {
          // 获取当前日期
          const today = new Date();
          // 将时、分、秒、毫秒归零，只留下年月日
          today.setHours(0, 0, 0, 0);
          // 将传入的日期 time 也归零
          time.setHours(0, 0, 0, 0);
          // 如果传入的日期和当天日期不一致，则禁用
          return time.getTime() !== today.getTime();
        }
      }
    };
  }
};
</script>

如示例图1 ：(当前时间4月18号)

仅选择当天且当天晚上十点前内可选

<script>
export default {
  data() {
    return {
      pickedDate: '', // 这是你的日期选择器绑定的变量
      pickerOptions: {
        disabledDate(time) {
          // 获取当前日期
          const today = new Date();
          // 将时、分、秒、毫秒归零，只留下年月日
          today.setHours(0, 0, 0, 0);
          // 获取当前时间
          const currentTime = new Date();
          // 设置晚上十点的时间
          const tenPM = new Date();
          tenPM.setHours(22, 0, 0, 0);
          // 如果当前时间晚于晚上十点，则禁用
          if (currentTime.getTime() >= tenPM.getTime()) {
            return true;
          }
          // 将传入的日期 time 也归零
          time.setHours(0, 0, 0, 0);
          // 如果传入的日期和当天日期不一致，则禁用
          return time.getTime() !== today.getTime();
        }
      }
    };
  }
};
</script>