在vue里 DateTimePicker在表单验证里只能选择一个小时之后的时间

在Vue中，您可以使用自定义指令来实现DateTimePicker表单验证中只能选择一个小时之后的时间。下面是一个示例代码：

<template>
  <div>
    <datetime-picker v-model="selectedDateTime" v-after-hour></datetime-picker>
  </div>
</template>

<script>
  // 引入DateTimePicker组件
  import DateTimePicker from 'your-date-time-picker-component-path';

  export default {
    components: {
      DateTimePicker
    },
    data() {
      return {
        selectedDateTime: ''
      };
    },
    directives: {
      afterHour: {
        inserted(el, binding) {
          // 监听DateTimePicker的值变化事件
          el.addEventListener('change', function() {
            // 获取当前选择的时间
            const selectedTime = new Date(el.value);

            // 将当前时间增加一个小时
            const minTime = new Date(selectedTime.getTime() + 60 * 60 * 1000);

            // 设置最小可选时间
            el.min = minTime.toISOString().slice(0, 16);
          });
        }
      }
    }
  };
</script>

在上述代码中，首先引入了DateTimePicker组件，并在模板中使用了该组件。然后，在Vue实例中定义了一个`selectedDateTime`属性来存储选择的时间。接着，通过自定义指令`v-after-hour`来实现在DateTimePicker值变化时的验证逻辑。指令的`inserted`钩子函数会在指令所绑定的元素被插入到DOM中时触发，这里我们在该函数中监听了DateTimePicker的值变化事件，并根据选择的时间设置最小可选时间。

请确保将示例代码中的`your-date-time-picker-component-path`替换为您实际使用的DateTimePicker组件路径。

希望对您有所帮助！如有任何疑问，请随时提问。