0

I am trying to update the mindate on a jquery-ui datepicker based on the selection of a dropdown.

I am adding the datepicker when the component is mounted and those options work fine.

I am trying to update the minDate when the input is clicked with a Vuejs click event.

I know that using Vue and Jquery together isn't ideal, but I am not allowed to use the CLI on this project and therefore can't use any of the other Vue datepickers.

What am I doing wrong?

<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');
  }
});
Steve Shore
  • 21
  • 1
  • 6
  • for the integration with a vue app. I would recommend you the date picker from element ui or vuetify: https://vuetifyjs.com/en/components/date-pickers & https://element.eleme.io/?ref=madewithvuejs.com#/en-US/component/date-picker – Simon Thiel Apr 26 '19 at 10:42
  • I'm trying to use element-ui. I need this to be able to work in ie11. Can I just add the bable's polyfill to the page? Sorry if this seems like a novice question. I'm new to vue and everything I see uses the CLI. I am having a hard time getting this to work without it – Steve Shore May 01 '19 at 15:17
  • got vuejs-datepicker to work, but it doesn't allow for dynamic minDate and maxDate values https://stackoverflow.com/questions/54023922/vuejs-datepicker-how-to-dynamically-disable-dates – Steve Shore May 02 '19 at 15:34
  • I got the element datepicker to update the mindate dynamically. The issue I'm having now is when you open the datepicker it defaults to the last month you were looking at. This doesn't update when the mindates do. @Simon, any pointers on this? https://codepen.io/anon/pen/rbXjLr – Steve Shore May 02 '19 at 20:09
  • Is there a way to force the Element UI datepicker to refresh so the dynamic disabled dates show on the current month? – Steve Shore May 03 '19 at 17:53
  • 1
    Fix the issue with element-ui here https://stackoverflow.com/questions/55975079/vue2-element-ui-datepicker-force-refresh-for-dynamic-disableddate – Steve Shore May 06 '19 at 18:08

0 Answers0