Проверка даты / времени работает только тогда, когда разница> 1 часа или значения не изменились - PullRequest
Новая
       10

Проверка даты / времени работает только тогда, когда разница> 1 часа или значения не изменились

0 голосов
/ 18 января 2019

У меня есть эта странная проблема, когда у меня есть средства выбора времени начала и окончания, когда на них (VE проверяют) проверка иногда работает

  • При запуске все нормально (как и ожидалось, с 10:00 до 11:00)
  • Если я перейду startDate вниз или endDate вверх, все нормально (без ошибок проверки) - как и ожидалось
  • Если я изменю время так, чтобы они были равны, я получу сообщение проверки (ожидается)
  • Тем не менее, после выполнения вышеуказанного шага, если я изменю любое значение времени на допустимый параметр (до для beforeDate после для afterDate), Я все еще вижу сообщение проверки, пока разница между 2 поля только 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
      }
   }
}
...