I'm currently attempting to integrate flatpickr into a Vue component that will then send dates to an eventHub. Unfortunately, I'm encountering difficulties as flatpickr appears to be unable to locate the input field.
The structure of my wrapper component is as follows:
<template>
<input type="text" id="flatpickr" placeholder="Select a range" />
</template>
<script>
const Flatpickr = require("flatpickr");
var defaultStart = new Date(new Date().setDate(new Date().getDate() - 10)).toISOString().slice(0, 10)
var defaultEnd = new Date().toISOString().slice(0, 10)
export default {
name: 'DatePicker',
props:['startDate', 'endDate'], // Although not required, all Children should receive data
mounted() {
new Flatpickr('#flatpickr', {
dateFormat: "Y-m-d",
mode: 'range',
altInput: true,
minDate: new Date().fp_incr(-60),
maxDate: defaultEnd,
locale: { firstDayOfWeek: 1},
onClose: function(selectedDates, dateStr, instance) {
let startDate = selectedDates[0].toISOString().slice(0, 10);
let endDate = selectedDates[1].toISOString().slice(0, 10);
this.$emit('change', { startDate, endDate });
}
})
}
}
</script>
I've attempted using .class-name as well, but without success. Can anyone help me identify the issue?