Vue.js datepicker 사용

1 개요

Vue.js datepicker 사용

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div id="app">
  <datepicker @update-date="updateDate" v-once></datepicker>
  <p>{{ date }}</p>
</div>

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<script>
Vue.component('datepicker', {
  template: '<input/>',
  mounted: function() {
    var self = this;
    $(this.$el).datepicker({
      dateFormat: "yy-mm-dd",
      onSelect: function(d){self.$emit('update-date',d)}
    });
  },
  beforeDestroy: function(){$(this.$el).datepicker('hide').datepicker('destroy')}
});

new Vue({
  el: '#app',
  data: {
    date: null
  },
  methods: {
    updateDate: function(d) {
      this.date = d;
    }
  }
});
</script>

2 같이 보기

• datepicker
• vue.js

3 참고

• https://jsbin.com/bepikonube/2/