时间戳

首页 > 解决方案 > Vue.js datepicker 不允许更新输入字段的默认值

javascript - Vue.js datepicker 不允许更新输入字段的默认值

问题描述

我vue-date-picker在输入字段中使用日期选择器功能，因为它 100% 符合我的要求。问题是它工作但在加载页面时我从数据库传递了一个默认值。v-model但在我删除属性之前，它不会向我显示值。

当我删除这个属性时，它没有更新从 datepicker 日历中选择的日期。

这是我正在使用的代码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 用于datepicker. 是否有一些我应该做的设置或者我错过了什么？

标签： javascriptvue.jsvuejs2datepickervue-component

解决方案

在您的模板中，将日期选择器@close事件更改为@close="closeDatePickerPopup"

并在您的方法对象中添加以下方法：

closeDatePickerPopup() {
   this.showRegularDate = false;
   console.log(this.regularDate);
   // here you have access to this.regularDate
   // and you could do whatever you want with this.regularDate
}

this.regularDate如果您想要添加此代码段的初始值：

created:function() {
   // ------------
},
mounted: function () {
   // initialize this.regularDate as follow    
   this.regularDate = "2018-09-08";
},

推荐阅读