[VueJS] vue datepicker 컴포넌트화 하여 사용하기 (ft. 한글 달력)

vueJS에서 따로 제공해주는 플러그인이나, 누군가 만들어놓은 라이브러리 같은건 찾지를 못해서.

jquery-ui에서 제공해주는 datepicker를 Vue.component로 만들어서 사용하고자 한다.

일단 jqeury-ui를 주입하고 (당연히 jquery가 주입되어 있어야한다.) 시작해보자.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

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

Vue.component('datepicker', {
  template: '<input/>',
  mounted: function() {
    var self = this;
    $(this.$el).datepicker({
      dateFormat: "yy-mm-dd"
      ,monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']
      ,monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']
      ,dayNames: ['일', '월', '화', '수', '목', '금', '토']
      ,dayNamesShort: ['일', '월', '화', '수', '목', '금', '토']
      ,dayNamesMin: ['일', '월', '화', '수', '목', '금', '토']
      ,changeMonth: true // 월선택 select box 표시 (기본은 false)
      ,changeYear: true  // 년선택 selectbox 표시 (기본은 false)
      ,showMonthAfterYear: true // 다음년도 월 보이기
      ,showOtherMonths: true // 다른 월 달력에 보이기
      ,selectOtherMonths: true // 다른 월 달력에 보이는거 클릭 가능하게 하기
      ,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;
    }
  }
});

▷ 결과