Question

我有一个奇怪的问题，我有开始和结束时间选择器，在它们上（vee验证）验证有时起作用

启动时一切正常（如预期，因为10:00在11:00之前）
如果我将startDate下移或endDate向上移动（没有验证错误），一切正常-
如果我更改时间使其相等，则会收到验证消息（预期）
但是，执行完上述步骤后，如果我将任一时间值更改为有效选项（在beforeDate之后更改为afterDate之后），只要这两个字段之间的差异只有1小时
将值更改为> 1小时时差后，验证在已更改的字段中消失，但是现在它会转到另一个字段，直到我更正为止

我在FF vue插件中看到值与预期的一样（分别为10：00、11：00），所以不确定问题出在哪里

我对Vue还是很陌生，所以不确定如何解决这个问题，这似乎是一个不一致的问题

请参阅下面的表单和脚本，并告诉我是否应包含其他内容：

<div style="position: relative;">
  <label for="startDate">Start</label>
  <date-picker ref="startDate" name="startDate" v-validate="'required|before:endDate|date_format:HH:mm'" 
    v-model="startDate" :config="options"></date-picker>
  {{startDate}}
  <span v-show="errors.has('startDate')" class="text-danger">{{ errors.first('startDate') }}</span>
</div>

<div style="position: relative;">
  <label for="endDate">End</label>
  <date-picker ref="endDate" name="endDate" v-validate="'required|after:startDate|date_format:HH:mm'" v-model="endDate" :config="options"></date-picker>
  {{endDate}}
  <span v-show="errors.has('endDate')" class="text-danger">{{ errors.first('endDate') }}</span>
</div>

使用脚本

import FormGroup from './FormGroup.vue'
import DatePicker from 'vue-bootstrap-datetimepicker'

import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css'

export default {
  name: 'ExampleForm',
  components: { DatePicker },
  data() {
    return {
      startDate: '10:00',
      endDate: '11:00',
      options: {
        format: 'HH:mm',
        useCurrent: false
      }
   }
}

日期/时间验证仅在时差大于1小时或值未更改时才有效

0 个答案: