在 vuejs-datetimepicker 中禁用选择今天之前的日期

Question

我在 vue 3 项目中使用 https://vuejsexamples.com/datetimepicker-component-for-vue-js/ 作为日期时间选择器。我不知道如何禁用选择今天之前的日期。 https://codesandbox.io/s/rw3l109yzo?file=/src/App.vue是它的代码沙箱。

Answer 1

我不认为该包支持禁用选择今天之前日期的机制，但我可以为您提供一个 hacky 解决方案。

首先，我们可以将

ref="datePicker"

添加到 DatePicker 组件中：

<Datepicker format="YYYY-MM-DD H:i:s" width="100%" ref="datePicker" />

然后我们可以监听该组件内部的数据变化并将其添加到

mounted()

：

  ...
  this.$watch("$refs.datePicker.timeStamp", (new_value, old_value) => {
    this.calendarOnChange();
  });
  ...

然后，在该函数上，我们可以为禁用日添加类，如下所示：

    calendarOnChange() {
      const days = document.getElementsByClassName("port");
      [...days].forEach((day) => {
        const timestamp = new Date(
          this.$refs.datePicker.year,
          this.$refs.datePicker.monthIndex,
          day.innerText
        );

        const today = new Date();
        today.setHours(0, 0, 0, 0);

        if (timestamp < today) {
          day.classList.add("beforeToday");
        } else {
          day.classList.remove("beforeToday");
        }
      });
    },

上述函数检查每个渲染日期并将它们与今天的日期进行比较。

最后，我们可以添加 CSS 以禁止单击今天之前的日期：

.beforeToday {
  color: #bbb;
  pointer-events: none;
}

分叉沙箱：