Create start and end date - date picker
<template>
<flat-pickr :config="configFromdateTimePicker" v-model="fromDate" placeholder="From Date" @on-change="onFromChange" />
<flat-pickr :config="configTodateTimePicker" v-model="toDate" placeholder="To Date" @on-change="onToChange" />
</template>
<script>
import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
export default {
data() {
return {
fromDate: null,
toDate: null,
configFromdateTimePicker: {
minDate: new Date(),
maxDate: null
},
configTodateTimePicker: {
minDate: null
}
}
},
methods: {
onFromChange(selectedDates, dateStr, instance) {
this.$set(this.configTodateTimePicker, 'minDate', dateStr);
},
onToChange(selectedDates, dateStr, instance) {
this.$set(this.configFromdateTimePicker, 'maxDate', dateStr);
}
},
components: {
flatPickr
}
}
</script>