プロパティ :typeable="true"
を設定することで解決する。
ただし、ユーザーによる自由入力が可能となってしまう為、適宜入力制御処理を実装する。
例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<div id="app">
<form>
<label>date</label>
<vuejs-datepicker
:format="DatePickerFormat"
:typeable="true"
wrapper-class="form-group"
:input-class="{'form-control': !errors.has('inputDate'), 'form-control is-invalid': errors.has('inputDate')}"
name="inputDate"
v-model="inputDate"
v-validate="'required'"
></vuejs-datepicker>
<small class="form-text text-danger" v-show="errors.has('inputDate')">
{{ errors.first('inputDate') }}
</small>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vuejs-datepicker@1.6.2/dist/vuejs-datepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@2.1.0-beta.9/dist/vee-validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@2.1.0-beta.9/dist/locale/ja.js"></script>
<script>
Vue.use(VeeValidate, {
events: 'input|blur',
});
new Vue({
el: '#app',
data: function () {
return this.initialState()
},
components: {
vuejsDatepicker
},
methods: {
initialState: function () {
return {
inputDate: '',
DatePickerFormat: 'yyyy-MM-dd',
}
}
}
});
</script>
</body>
</html>