如何使用 v-calendar 禁用开始日期和时间之前的小时数？

Question

我正在使用 v-calendar 将开始日期和时间以及结束日期和时间使用的模式设为 dateTime。我的要求是结束日期和时间不要早于开始日期和时间。为此，我使用 :min-date prop 与开始日期和时间值绑定，如下面的代码所示。

<v-date-picker :min-date="this.formData.startDate" v-model="formData['endDate']" mode="dateTime" :timezone="timezone" name="End Date" class="dateTimePicker">
    <template v-slot="{ inputValue, inputEvents }">
        <input
           class="px-2 py-1 border rounded focus:outline-none focus:border-blue-300"
           :value="inputValue"
           v-on="inputEvents"
        />
    </template>
</v-date-picker>

现在假设 select 开始日期和时间是 2 月 10 日，05:00 上午 ，而 select 结束日期和时间， 10 之前的日期将被禁用。但是如果我 select 10th 作为日期（同一日期），我仍然可以 select 04:00 AM 作为时间不对。

那么有没有办法禁用关于 selected 日期的时间？

Answer 1

正如我在他们的 documentation 中看到的那样，您可以传递 validHours 道具，如果一个小时有效，该道具是 returns 的函数。

所以根据你的实现，你可以做这样的事情：

<v-date-picker :validHours="isHourValid()" :min-date="this.formData.startDate" v-model="formData['endDate']" mode="dateTime" :timezone="timezone" name="End Date" class="dateTimePicker" >
    <template v-slot="{ inputValue, inputEvents }">
        <input
           class="px-2 py-1 border rounded focus:outline-none focus:border-blue-300"
           :value="inputValue"
           v-on="inputEvents"
        />
    </template>
</v-date-picker>

<script>
  function isHourValid(hourThatIsSelected){
    let startDateVal = 12 // extract hour from formData['startDate'], eg. 12
    return hourThatIsSelected > startDateVal 
  }
</script>

如何使用 v-calendar 禁用开始日期和时间之前的小时数？

How to disable the hours before the start date&time using v-calendar?

javascript

datetime

vcalendar

vue.js