我在输入字段中使用vue-date-picker
来实现日期选择器功能,因为它100%符合我的要求。问题是它能正常工作,但是在加载页面时,我正在从数据库传递默认值。但在我删除v-model
属性之前,它不会显示该值。
当我删除此属性时,它没有更新从日期选择器日历中选择的日期。
这是我在html
中使用的代码
<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>
使用我正在使用的格式的脚本
<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>
我只是将这个Vue用于日期选择器。是否有一些我应该做的设置或我缺少什么?
答案 0 :(得分:2)
在模板中,将日期选择器WRITE_METADATA
事件更改为SET_FIELD
,然后在您的method对象中添加以下方法:
e.printStackTrace(System.out);
,如果您想要@close
的初始值,请添加以下代码段:
@close="closeDatePickerPopup"