Datepicker for Vue

Datepicker component is based on flatpickr for Vue

by maxell4o

HTML

<script src="https://unpkg.com/flatpickr"></script>

<div id="app">
  <div class="ui form">
    <datepicker v-model="date"></datepicker>
  </div>
</div>

<template id="datepicker">
  <div ref="date" class="ui left action input">
    <button class="ui icon button" data-toggle>
      <i class="calendar icon"></i>
    </button>
    <input type="text" :name="name" :placeholder="placeholder" :readonly="readonly" @change="$emit('input', $event.target.value)" data-input/>
    <button class="ui inverted icon button" :disabled="!value" data-clear>
      <i class="remove red icon"></i>
    </button>
  </div>
</template>

CSS

@import url('https://unpkg.com/[email protected]/semantic.css');
@import url('https://unpkg.com/flatpickr/dist/flatpickr.min.css');

JavaScript

Vue.component('datepicker',
	name: 'datepicker',
  template: '#datepicker',
  props: {
    name: String,
    value: {
      require: true
    },
    placeholder: String,
    readonly: Boolean
  },
  date() {
    return {
      datepicker: null
    }
  },
  mounted() {
    if (!this.datepicker) {
      this.datepicker = flatpickr('.ui.input', {
        wrap: true
      })
      /*
      let lang = 'ko'
      let locale = require(`flatpickr/dist/l10n/${lang}.js`)[lang]
      this.datepicker = new Flatpickr(this.$refs.date, {
        wrap: true,
        locale
      })
      */
    }
  },
  destroyed() {
    this.datepicker.destroy()
    this.datepicker = null
  }
})

new Vue({
	el: '#app',
  data() {
  	return {
    	date: null
    }
  },
  watch: {
  	date() {
    	console.log(this.date)
    }
  }
})