我将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>
第一次显示日期选择器时,可以将日历选择图像和日期选择器一起显示:
如果我更改选择项上的选择值,则我的日期选择器将被隐藏,但图像将保持显示状态:
有什么想法可以解决这个问题吗?