我正在根据下拉列表的选择来更新jquery-ui datepicker上的提示。
我在安装组件时添加了日期选择器,并且这些选项工作正常。
当我使用Vuejs click事件单击输入时,我正在尝试更新minDate。
我知道同时使用Vue和Jquery是不理想的,但是我不允许在此项目上使用CLI,因此不能使用任何其他Vue日期选择器。
我在做什么错了?
<script type="text/x-template" id="modal-template">
<div class="modal">
<input class="datepicker"
v-model="statusDate"
v-on:click="updateDatePickerMinDate()" />
<select v-model="statusTypeEnum">
<option value="1">Status 1</option>
<option value="2">Status 2</option>
</select>
</div>
</script>
Vue.component('date-picker-modal', {
template: "#modal-template",
props:["statusDate","statusTypeEnum"],
methods: {
updateDatePickerMinDate: function(){
var self = this;
var minDate = "-90d";
if (self.$root.statusTypeEnum === "2") {
minDate = "-180d";
}
$(self.$el).find(".datepicker").datepicker("options", {
minDate: minDate
});
}
},
mounted: function() {
var self = this;
$(self.$el).find(".datepicker").datepicker({
onSelect: function (selectedDate, datePicker) {
self.$root.startDate = selectedDate;
},
maxDate: "+0d"
});
},
beforeDestroy: function() {
var self = this;
$(self.$el).find(".datepicker").datepicker('hide').datepicker('destroy');
}
});