Vue.directive('calendar', {
    inserted(el, binding) {
      // :v-calendar="{ format: 'YYYY-MM-DD HH:mm:ss' }"
      const options = Object.assign({
        // Some default options

        // Use FontAwesome icons
        icons:{
          time: 'fa fa-clock-o',
          date: 'fa fa-calendar',
          up: 'fa fa-chevron-up',
          down: 'fa fa-chevron-down',
          previous: 'fa fa-chevron-left',
          next: 'fa fa-chevron-right',
          today: 'fa fa-calendar-check-o',
          clear: 'fa fa-trash-o',
          close: 'fa fa-close'
        }
      }, binding.value || {});

      $(el).datetimepicker(options).on('dp.change', function (event) {
        const input = el.querySelector('input');

        let e = new Event('change');
        input.dispatchEvent(e);

        e = new Event('input');
        input.dispatchEvent(e);
      });
    }
  });