Solution 1 :

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 ('datetime-wrapper')) {
    console.log('Toggle calendar!');

  .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="" rel="stylesheet"/>
<link href="" rel="stylesheet"/>
<input type="date" />
<div class="datetime-wrapper">
  <input type="text" />
<span>Font Awesome:</span>
<i class="fa-solid fa-calendar-days"></i>

Solution 2 :

Unfortunately at this moment only WebKit allows us to customize datetime. If it is acceptable for you you can read this article

Problem :

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">


Before clicking on calender image
enter image description here

After clicking on calender image
enter image description here


Comment posted by Mr. Polywhirl

Use an

Comment posted by Jaydeep Mor