I incorporated the vue-date-picker for date picker functionality in my input fields because it perfectly aligned with all of my requirements. The issue I encountered is that when loading the page, I attempted to pass a default value from the database, but it did not display until I removed the v-model attribute.
However, upon removing the attribute, the selected date from the datepicker calendar was not being updated.
Below is the HTML code snippet I am currently using:
<input type="text" id="regular-date" class="form-control w-p100" placeholder="eg. 21 August, 2018" readonly @focus="showRegularDate = true">
<transition name="calendar-fade">
<date-picker color="#b173f8" :format="formatDate"
@close="showRegularDate = false"
v-if="showRegularDate"
v-model="regularDate"></date-picker>
</transition>
For the format in the script section, I am utilizing:
<script>
Vue.use(DatePicker)
Vue.config.lang = 'en';
new Vue({
el: '.app',
created: function () {
var today = new Date
this.minDateLimit = '' + today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate()
this.maxDateLimit = '' + today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + (today.getDate() + 7)
},
data: {
regularDate: '',
regularDate_2: '',
regularDate_3: '',
regularDate_4: '',
regularDate_5: '',
showRegularDate: false,
minDateLimit: '',
minDate: '',
showMinDate: false,
maxDateLimit: '',
maxDate: '',
showMaxDate: false,
rangeDate: '',
showRangeDate: false,
specifiedDate: '2016-4-19',
showSpecifiedDate: false,
formattedDate: '',
showFormattedDate: false
},
methods: {
formatDate(date) {
return moment(date).format('LLLL');
},
formatDate_2: function (date) {
return moment(date).format('LLLL');
},
formatDate_3: function (date) {
return moment(date).format('LLLL');
},
formatDate_4: function (date) {
return moment(date).format('LLLL');
},
formatDate_5: function (date) {
return moment(date).format('LLLL');
}
}
})
</script>
I am exclusively utilizing this vue for the datepicker. Could there be any specific settings or elements that I might have overlooked?