JavaScript
vue.js

VeeValidateで日付のバリデーションをする

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になっていると動かないので注意する。