Could you please add an option to alter the background color for the calender icon like this, now there is white color as bg.

now i have altered your css with my own like this.

I dont know if there already a possible way to do it. If there please help me ...
Change css just like you do now.
Or you can use your own icon by slot calendar-icon
<datepicker>
<template slot="calendar-icon" >
<i></i>
</template>
</datepicker>
I have already passed a font awesome icon through the calendar-icon slot, but there is still white bg along with that input box. My input box is grey.
I'll remove the icon background-color
or else you can make an element to alter the background color for the users it may be perfect, like theinput-class bg color..
The background-color is redundant.
Most helpful comment
Change css just like you do now.
Or you can use your own icon by slot
calendar-icon