I have been utilizing this date picker, and it is functioning correctly. However, it seems to lack some CSS styling. Despite numerous attempts to implement the missing CSS code, I have not been successful. Below is the relevant section of my current code:
<template>
<div class="row">
<div class="col-lg-4">
<div class="input-group">
<date-picker
name="start-date"
ref="startDate">
</date-picker>
<div class="input-group-prepend">
<button class="btn btn-outline-primary" type="button" @click="$refs.startDate.dp.show()">
<font-awesome-icon icon="calendar-alt"></font-awesome-icon>
</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="input-group">
<date-picker
name="end-date"
ref="endDate">
</date-picker>
<div class="input-group-prepend">
<button class="btn btn-outline-primary" type="button" @click="$refs.endDate.dp.show()">
<font-awesome-icon icon="calendar-alt"></font-awesome-icon>
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import datePicker from 'vue-bootstrap-datetimepicker';
// Import date picker css
import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css';
export default {
name: "DateRange",
components: {
myDatePicker,
},
date: {
startDate: '2019-10-10',
endDate: '2019-09-09'
}
}
</script>
Here is a visual representation of how my datepicker currently appears:
https://i.sstatic.net/jLQtM.png
Although the arrows for navigating to the next/previous month are functional, they are not visible on the datepicker. These arrows should be visible, similar to the examples provided in the library documentation. Upon inspecting elements, no overriding objects were identified, and there are no warnings or errors present. After exhausting all recommended solutions from other Stack Overflow posts, I am unsure how to proceed. Is there a method to display the arrows, or should I resort to implementing custom arrow CSS styles?