Vue2和jquery-ui datepicker :: minDate不动态更新

时间:2019-04-25 19:59:24

标签: jquery-ui vuejs2 vue-component jquery-ui-datepicker mindate

我正在根据下拉列表的选择来更新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');
  }
});

0 个答案:

没有答案