0

我正在尝试根据下拉列表的选择更新 jquery-ui datepicker 上的 mindate。

我在安装组件并且这些选项工作正常时添加日期选择器。

当使用 Vuejs 单击事件单击输入时，我正在尝试更新 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');
  }
});
4

0 回答 0