vue.js datepickker不允许更新输入字段的默认值

时间:2018-09-07 12:53:20

标签: vue.js datepicker

我在输入字段中使用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用于日期选择器。是否有一些我应该做的设置或我缺少什么?

1 个答案:

答案 0 :(得分:2)

在模板中,将日期选择器WRITE_METADATA事件更改为SET_FIELD

,然后在您的method对象中添加以下方法:

e.printStackTrace(System.out);

,如果您想要@close的初始值,请添加以下代码段:

@close="closeDatePickerPopup"