Я создаю компонент 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;" >* <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>
Когда средство выбора даты установленоотображается в первый раз, все в порядке. У меня есть средство выбора даты с изображением выбора календаря:
Если изменить значение выбора на выбранном, мой указатель даты скрыт, но изображение остается на дисплее:
Есть идеи, чтобы это исправить?