vue3-flatpickr-component

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

by ketanmokariya

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@9/dist/vue-flatpickr.js"></script>
<main id="app">
  <h3>
    Start Date
  </h3>
  <flat-pickr v-model="startDate" :config="configStartDate" placeholder="Select a date" name="birthdate" class="form-control"></flat-pickr>
  <hr> v-model: {{startDate}}
  
  
  <h3>
    End Date
  </h3>
  <flat-pickr v-model="endDate" :config="configEndDate" placeholder="Select a date" name="birthdate" class="form-control"></flat-pickr>
  <hr> v-model: {{endDate}}
</main>

CSS

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

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

JavaScript

Vue.createApp({
  components: {
    FlatPickr: VueFlatpickr
  },
  data() {
    return {
      startDate: null,
      endDate:null,
      // https://chmln.github.io/flatpickr/options/
      configStartDate: {
        altFormat: "F j, Y",
        altInput: true,
        enableTime: true,
        defaultHour:0,
        
      },
      configEndDate:{
       altFormat: "F j, Y",
        altInput: true,
        enableTime: true,
        defaultHour:12,
        
      }
    }
  },
  methods: {

  }
}).mount('#app')