jQuery UI Datepicker2

by Eugene Manager

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="app">
  <date-picker 
    date-format="yy-mm-dd" 
    v-once
    :date="date"
  >
  </date-picker>
<p>{{ date }}</p>
</div> 


<script type="text/x-template" id="date-template" >
  <div class="wrapper">
    <input class="div" />
    <input v-model="date" />
  </div>
</script>

JavaScript

Vue.component('date-picker', {
  template: '#date-template',
  props: [ 'dateFormat' ,'date'],
  mounted: function() {
    var self = this;
    $(this.$el).find('.div').first().datepicker({
      dateFormat: this.dateFormat,
      onSelect: function(date) {
        //self.$emit('update-date', date);
        self.date = date;
      }
    });
    $(this.$el).find('.div').first().datepicker("setDate","2017-12-01");
  },
  beforeDestroy: function() {
    $(this.$el).datepicker('hide').datepicker('destroy');
  },
  watch: {
    date: function (val, oldVal) {
      console.log(oldVal + ' -> ' + val);
    }
  }
});

new Vue({
  el: '#app',
  data: {
    date: '2017-11-01'
  }
});