UPDATE:
This is a bug and I have raised it as an issue on github. TBH, the component is not really ready for mainstream use yet.
My vuejs-datepicker will not accept a dd/mm/yy format if the day is 13 or greater. Presumably this is because it is interpreting the first two digits to be the month, and therefore rejects anything greater than 12.
The calendar pops up. You can select a date, and it shows in the input field. However, as soon as the field loses focus, it is cleared.
I have tried using both a static string as the value of format, and a function. Below is the function version.
HTML:
<div id="respond_by">
<date-picker name="respond_by"></date-picker>
</div>
Script at foot of page:
<script>
$(function () {
new Vue({ el: "#respond_by" });
});
</script>
My single file component:
<template>
<vue-date-picker placeholder="dd/mm/yy"
input-class="form-control"
:name="name"
:format="customDateFormat"
monday-first
typeable></vue-date-picker>
</template>
<script>
import moment from 'moment';
import DatePicker from 'vuejs-datepicker';
export default {
props : [
'name'
],
components: {
'vue-date-picker' : DatePicker
},
methods: {
customDateFormat(date) {
return moment(date).format('DD/MM/YY');
}
}
}
</script>
Globally registering the component:
import DatePicker from './date-time/date-picker.vue';
Vue.component('date-picker', DatePicker);
I have tested both Firefox and Chrome, with the same result.
I have tested the vuejs-datepicker code sand box and it works fine there, https://codesandbox.io/s/mpklq49wp. I tested it by adding the following line to the list of options in the formatting example:
<option value="dd/MM/yy">dd/MM/yy - e.g 13/11/18</option>