JSFiddle - React, Tailwind, and code Playground
HTML
<input id="datepicker" type="date">
CSS
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button {
display: none;
appearance: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
color: rgba(0, 0, 0, 0);
opacity: 1;
display: block;
background: url(https://mywildalberta.ca/images/GFX-MWA-Parks-Reservations.png) no-repeat;
width: 20px;
height: 20px;
border-width: thin;
}
JavaScript
var picker = new Pikaday({
field: document.getElementById('datepicker'),
datepicker: 'minDate: 0',
format: 'yyyy-MM-dd',
toString(date, format) {
let day = ("0" + date.getDate()).slice(-2);
let month = ("0" + (date.getMonth() + 1)).slice(-2);
let year = date.getFullYear();
return `${year}-${month}-${day}`;
}
});