Make Datetime-local css changes

Question

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

Use an `:after` rule (Unicode font icon) in the input element (position relative), and set the font icon (position absolute) style to `right: 0.5rem` (to that effect). — Mr. Polywhirl, Mar 21 '22 at 10:44
`datetime-local` shows system and browser wise calendar we should not modify it! — Jaydeep Mor, Mar 21 '22 at 11:26

score 1 · Accepted Answer · answered Mar 21 '22 at 11:22

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>

score 0 · Answer 2 · answered Mar 21 '22 at 10:47

0

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

answered Mar 21 '22 at 10:47

EzioMercer

1,502
2
7
23

Make Datetime-local css changes

2 Answers2