0
248
ViewsMake Datetime-local css changes
CSS changes for datetime-local input tag:
I want to make this calender thing on the right side as shown in image 2, please help me to resolve this.
Here are my codes for the Input tag with type "datetype-local"
<h1>Show a Date and Time Control</h1>
<form action="/action_page.php">
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
<input type="submit">
</form>
Thanks
Before clicking on calender image
After clicking on calender image
2 answers
Answer question0
Unfortunately at this moment only WebKit allows us to customize datetime. If it is acceptable for you you can read this article
0
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>