Vuelidate 날짜 입력 필드

Vuelidate 날짜 입력 필드

나는 누군가 나에게 날짜 오브젝트를 검증하는 동안 어떻게 Vuelidate를 적절하게 사용하는지 명확하게 해줄 수 있기를 바란다.나는 현재 날짜를 최소 날짜로 사용하고 싶기 때문에 나중에 사용자가 날짜를 입력하면 오류가 표시된다.

예를 들어, 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를 사용하고 있으며 공식 Vuelidate 설명서의 minValue를 사용하고 있다: https://monterail.github.io/vuelidate/#sub-builtin-validators

어떤 도움이라도 고마워, 정말 고마워!

사용자 정의 검증자를 정의할 수 있음:

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;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://unpkg.com/vuelidate/dist/validators.min.js"></script>
<script src="https://unpkg.com/vuelidate/dist/vuelidate.min.js"></script>
<div id="app">
  <input type="text" v-model="text"
    v-on:input="$v.text.$touch"
    v-bind:class="{error: $v.text.$error, valid: $v.text.$dirty && !$v.text.$invalid}"
  >
  <pre>{{ $v }}</pre>
  Text: {{ text }}
</div>

참조URL: https://stackoverflow.com/questions/50426266/vuelidate-date-input-field