Поймать скрыть событие в компоненте vueJS DatePicker - PullRequest
0 голосов
/ 24 сентября 2018

Я создаю компонент 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

Есть идеи, чтобы это исправить?

...