vue3-flatpickr-component

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

by Ankur Kumar

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://cdn.jsdelivr.net/npm/vue@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-flatpickr-component@11"></script>
<main id="app">
  <h3>
    Vue flatpickr + Vue3 example
  </h3>
  <flat-pickr v-model="date" :config="config" placeholder="Select a date" name="birthdate" class="form-control"></flat-pickr>
  <hr> v-model: {{date}}
</main>

CSS

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

.form-control {
  font-size: 16px;
  padding: 4px;
}

JavaScript

Vue.createApp({
  components: {
    FlatPickr: VueFlatpickr.default
  },
  data() {
    return {
      date: null,
      // https://chmln.github.io/flatpickr/options/
      config: {
        altFormat: "F j, Y",
        altInput: true
      }
    }
  },
  methods: {

  }
}).mount('#app')