The <input type="date" /> element already has an adornment, but it varies from browser and and OS. You would need to make a custom wrapper element (as seen below), if you want your UI to be consistent across all systems.
You can add an input adornment by wrapping the <input> in a <div> and adding an ::after style for the wrapper. The native <input> element does not support ::before and ::after, because it is not a container element.
const handleClickIcon = (e) => {
if (e.target.classList.contains('datetime-wrapper')) {
console.log('Toggle calendar!');
}
};
document.querySelector('.datetime-wrapper')
.addEventListener('click', handleClickIcon);.as-console-wrapper { max-height: 4em !important; }
.datetime-wrapper {
position: relative;
padding: 0;
margin: 0;
width: max-content;
}
.datetime-wrapper input {
padding: 0.5rem;
border: thin solid grey;
border-radius: 0.25rem;
}
/* adornment */
.datetime-wrapper::after {
/* .fa-solid */
font-family: "Font Awesome 6 Free";
font-weight: 900;
/* .fa-calendar-days:before */
content: "f073";
/* custom */
position: absolute;
top: 0;
right: 0.5rem;
height: 2rem;
line-height: 2rem;
cursor: pointer;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/fontawesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/solid.min.css" rel="stylesheet"/>
<input type="date" />
<div class="datetime-wrapper">
<input type="text" />
</div>
<span>Font Awesome:</span>
<i class="fa-solid fa-calendar-days"></i>
