I included vue2-daterange-picker 0.6.5 in a Vue 2 component following the instructions on the homepage.
When I select a date range the styles aren't correctly applied. Inspecting, there's a problem with the computed CSS classes:
which means the styles for date ranges do not apply:
I tried using an earlier version 0.6.4 to see if it fixed it (our site uses Bootstrap), but it doesn't.
The relevant bits of the single file component are:
<template>
<div>
<date-range-picker
ref="picker"
opens="right"
:locale-data="{ firstDay: 1, format: 'dd-mm-yyyy HH:mm:ss' }"
:timePicker="true"
:showDropdowns="true"
v-model="dateRange"
@update="updateDateRange"
:dateFormat="dateFormat"
>
<template v-slot:input="picker" style="min-width: 350px;">
{{ picker.startDate | date }} - {{ picker.endDate | date }}
</template>
</date-range-picker>
</div>
</template>
<script>
import DateRangePicker from 'vue2-daterange-picker'
//you need to import the CSS manually
import 'vue2-daterange-picker/dist/vue2-daterange-picker.css'
export default {
data() {
return {
dateRange: {
startDate: null,
endDate: null
},
}
},
methods: {
updateDateRange(val) {
// Called by the date picker when the range changes
console.log(val)
},
dateFormat(dateObj) {
return dateObj.toLocaleString();
}
},
components: {
DateRangePicker,
},
}
</script>
I included
vue2-daterange-picker
0.6.5 in a Vue 2 component following the instructions on the homepage.When I select a date range the styles aren't correctly applied. Inspecting, there's a problem with the computed CSS classes: which means the styles for date ranges do not apply:
I tried using an earlier version 0.6.4 to see if it fixed it (our site uses Bootstrap), but it doesn't.
The relevant bits of the single file component are: