Having trouble with my date picker component (v-date-picker) where I can't seem to get the icon, a Font Awesome Icon separate from the date-picker, to open the calendar on focus when clicked. I've attempted some solutions mentioned in this resource: How to increase the clickable area of a <a> tag button? However, none of them have worked for me so far. It should be simple but it's just not functioning as expected.
<template>
<div class="v-date-picker">
<v-date-picker
mode="single"
:value="date"
@input="emit"
:placeholder="placeholder"
popoverVisibility="focus"
v-bind="$attrs"
:max-date="maxDate"
:min-date="minDate"
>
</v-date-picker>
<font-awesome-icon v-bind="$attrs" :icon="['far','calendar']" />
</div>
</template>
//skip all my code here....
<style lang="scss">
.v-date-picker {
position:relative;
input {
height: 36px;
display: block;
border: 1px solid #f3f3f3;
padding: 8px 12px;
font-size: 14px;
background: #f3f3f3;
box-shadow: 0 0 0 #EAEAEA;
width: 100%;
transition: all .3s ease-in-out;
border-radius: 4px;
&:hover {
border-color: #ddd;
box-shadow: none;
}
&:focus {
border-color: #ea7d1c;
box-shadow: none;
}
}
}
input::-webkit-input-placeholder { color: #ccc;}
input::-webkit-input-placeholder { color: #ccc;}
input::-moz-placeholder { color: #ccc;}
input:-ms-input-placeholder { color: #ccc;}
.fa-calendar {
position: absolute;
right: 10px;
top: 10px;
font-size: 16px;
color: #666;
}
.date-picker .vdp-datepicker__calendar .cell.selected,
.date-picker .vdp-datepicker__calendar .cell.selected.highlighted,
.date-picker .vdp-datepicker__calendar .cell.selected:hover {
background: #ea7d1c;
color: white;
}
.date-picker .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,
.date-picker .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,
.date-picker .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {
border-color: #ea7d1c;
}
</style>