Поле ввода даты Vuelidate - PullRequest
Новая
       20

Поле ввода даты Vuelidate

0 голосов
/ 19 мая 2018

Я надеюсь, что кто-то может объяснить мне, как правильно использовать Vuelidate при проверке объекта Date.Я хочу использовать текущую дату в качестве минимальной даты, поэтому, если пользователь вводит дату позже, будет отображаться ошибка.

У меня есть пример: https://jsfiddle.net/cheslavcc/fns8eh0f/1/

Vue.use(window.vuelidate.default)
const { required, minValue } = window.validators

new Vue({
  el: "#app",
  data: {
    text: ''
  },
  validations: {
    text: {
        minValue: minValue(moment(new Date(), 'DD.MM.YYYY').format('DD.MM.YYYY')),
    }
  }
})

Я использую Moment.js в качестве средства форматирования даты и minValue из официальной документации Vuelidate: https://monterail.github.io/vuelidate/#sub-builtin-validators

Любая помощь приветствуется, большое спасибо!

1 Ответ

0 голосов
/ 19 мая 2018

Вы можете определить пользовательский валидатор: 

Vue.use(window.vuelidate.default)
const { required, minValue } = window.validators

const currentDate = moment(new Date()).startOf('day')
const minDate = window.vuelidate.withParams({minDate: currentDate.format('DD.MM.YYYY')}, value => moment(value, 'DD.MM.YYYY', true).isSameOrAfter(currentDate))

new Vue({
	el: "#app",
  data: {
  	text: ''
  },
  validations: {
  	text: {
			minDate
    }
  }
})
input {
  border: 1px solid silver;
  border-radius: 4px;
  background: white;
  padding: 5px 10px;
}

.error {
  border-color: red;
  background: #FDD;
}

.error:focus {
  outline-color: #F99;
}

.valid {
  border-color: #5A5;
  background: #EFE;
}

.valid:focus {
  outline-color: #8E8;
}





  
  {{ $v }}
Текст: {{text}}
...