Vue.jsのフォームバリデーションであるVeeValidateで、日付のバリデーションをする手順を書いていく。
VeeValidate : http://vee-validate.logaretm.com/
moment.jsを入れる
VeeValidateの日付処理にはmoment.jsが必要なためインストールする。
moment.js : https://momentjs.com/
$ npm install moment --save
インストールしたら、以下のようにして設定。
app.js
import Vue from 'vue';
import moment from 'moment';
import VeeValidate, { Validator } from 'vee-validate';
Validator.installDateTimeValidators(moment);
Vue.use(VeeValidate);
日付のバリデーションをする
日付のバリデーションにはdate_formatを使用する。
DateValidation.vue
<template>
<div>
<input
type="text"
name="date"
v-model="date"
v-validate="'required|date_format:YYYY-MM-DD HH:mm:ss'"
/>
</div>
</template>
特に日付フォーマットはmoment.jsのドキュメントに沿って書く必要があり、DDがddになっていたり、ssがSSになっていると動かないので注意する。