Amazeui datepicker.vue

datepicker.vue

<template id="datepicker-template">
    <div class="am-input-group am-datepicker-date" data-am-datepicker="{format: 'yyyy-mm-dd'}" v-dp="date">
        <input type="text" class="am-form-field" readonly >
  <span class="am-input-group-btn am-datepicker-add-on">
    <button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span> </button>
  </span>
    </div>
</template>

<script>
Vue.directive('dp', {
        bind: function () {
            var vm = this.vm;
            var key = this.expression;
            var el = this.el;
            $(this.el).datepicker().on('changeDate.datepicker.amui', function (event) {
                vm.$set(key, $(el).data('date'));
                $(this).datepicker('close');
            });
        },
        update: function(newv, oldv) {
            $(this.el).datepicker('setValue', newv);
        }
    });
Vue.component('datepicker', {
        template: '#datepicker-template',
        props: ['date']
});
</script>

<!-- Usage: -->
<div id="container">
  <datepicker :date.sync="date" />
  Current date: {{date}}
</div>

<script>
  new Vue({
    el: '#container',
    data: {
      date: '2011-02-03'
    }
  });
</script>