在vueJS DatePicker组件上捕获Hide事件

时间:2018-09-24 10:19:24

标签: vue.js vuejs-datepicker

我将datePicker vueJS组件设计为:

Vue.component('vue-date-picker', {
name: 'vue-date-picker',
template: '<input v-model="date" type="text" :class="type" placeholder="jj/mm/aaaa" />'
,
props : {
    'value': {
        type: String,
        required: true,
    },
    'style': {
        style: String,
        default: 'width:150px; margin-right:5px; text-align:center;'
    },
    'type': {
        type: String,
        default: 'date'
    },
    'isdateinftodayautorised':{
        type: String,
        default: 'true'
    },
},
data : function () {
    return {
        date : this.value,
        isdateinftodayautorised : this.isdateinftodayautorised, 
    }
},
mounted: function() {

    $(this.$el).datepicker({
        showOn: 'both',
        buttonImage: '/foagan/resources/img/bt_calendar_2.png',
        buttonText: 'Sélectionner une date',
        dateFormat: 'dd/mm/yy',
        onClose: function() {
            $(this).removeClass('placeholded');
        },
        onSelect: function(date, isdateinftodayautorised) {
            this.$emit('input', date, isdateinftodayautorised);  // genere le @input (v-model ==> :value + @input) et genere le @isDateInfTodayAutorised
        }.bind(this)
    });

    // Si isdateinftodayautorised est à false, alors on interdit la saisie d'une date < date du jour
    if(this.isdateinftodayautorised == "false") {
        $(this.$el).datepicker("option", "minDate", new Date(new Date().getTime()));
    }
}
});

此元素在我的jsp上通过名为objetDdeDerogation的选择值显示:

<div class="row" v-if="objetDdeDerogation == 2">
                    <div class="col-md-12">
                        <p class="clearfix" style="margin-bottom: 1em;" :class="{error : isDateRequired}">
                            <label for="date" style="width:300px;" >*&nbsp;<spring:message code="demander.derogation.prolong" /></label>
                            <vue-date-picker id="date" size="10" placeholder="jj/mm/aaaa" v-model="date" required="required" isdateinftodayautorised="false"></vue-date-picker>
                        </p>
                    </div>
                </div>

第一次显示日期选择器时,可以将日历选择图像和日期选择器一起显示:

enter image description here

如果我更改选择项上的选择值,则我的日期选择器将被隐藏,但图像将保持显示状态:

enter image description here

有什么想法可以解决这个问题吗?

0 个答案:

没有答案