vue-flatpickr-component

https://github.com/ankurk91/vue-flatpickr-component

by Andrejs Gubars

HTML

<link rel="stylesheet" href="https://unpkg.com/flatpickr@4/dist/flatpickr.min.css">
<script src="https://unpkg.com/flatpickr@4"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-flatpickr-component@latest/dist/vue-flatpickr.js"></script>
<main id="app">
  <h3>
    Vue flatpickr example
  </h3>
  <flat-pickr v-model="date" :config="config" placeholder="Select a date" name="birthdate"></flat-pickr>
  <hr> v-model: {{date}}
</main>

CSS

body {
  font-family: Verdana, 'Arial', sans-sarif;
  background: #f8f8f8
}

JavaScript

Vue.component('flat-pickr', VueFlatpickr);

 new Vue({
   el: '#app',
   data: {
     date: null,
     // https://chmln.github.io/flatpickr/options/
     config: {
       altFormat: "d/m/Y",
       dateFormat: 'Y-m-d',
       allowInput: true,
       altInput: true
     }
   },
   methods: {

   }
 });