Search code examples
htmlcssdatepicker

How to customize HTML5 date picker

I am trying to understand how to customize the HTML5 date picker in a specific way, specifically that the format is something like [calendar icon] 8/31, Tue with a caret to the right that will open the date picker. After some initial searching, I found these pseudo-elements for customizing the date input's textbox.

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

The expected result would be that these options for customization would pretty much satisfy most cases to customize the date picker, but I have so far been unable to apply these to completely satisfy the goal. For instance, I am trying to get rid of the 2nd forward slash in the textbox (the / after 31) and I do not know how I could be able to add Tue (for Tuesday, or Mon for Monday, Fri for Friday, etc). There are no error messages.

Using ::-webkit-datetime-edit-year-field { display: none; } I was able to hide the year from the textbox, but when I tried to target the 2nd / (using Are there any style options for the HTML5 Date picker? as a reference point) with the nth-child() pseudo class (to target the 2nd /) there are no visible changes. As far as the shortened version of the day of the week (Mon, Tue, Wed, Thur, Fri, Sat, Sun) I have no idea how to actually approach that (and will update if I find a viable approach).

::-webkit-datetime-edit-text {
  color: darkgreen;
}


/* this did not work */

::-webkit-datetime-edit-text:nth-child(2) {
  display: none;
}

::-webkit-datetime-edit-month-field {
  color: darkgreen;
}

::-webkit-datetime-edit-day-field {
  color: darkgreen;
}

::-webkit-datetime-edit-year-field {
  display: none;
}

::-webkit-calendar-picker-indicator {
  display: none;
}

.datepicker-container {
  display: inline;
  position: relative;
  width: 100%;
  height: 7.625rem;
}

.datepicker-input {
  padding-left: 4rem !important;
}
<span class="datepicker-container">
  <input type="date"
         class="datepicker-input"
         name="send"
         value="2021-08-31"
  >
</span>

and for visuals, here is what it currently looks like:

screenshot

Ideally, it would look something like this:

enter image description here

Solution

  • I don't see a way to manipulate the shadow dom elements with normal selectors. You might be able to get away with something hacky:

    ::-webkit-datetime-edit-text { visibility:hidden;}
::-webkit-datetime-edit-month-field { color: darkgreen; }
::-webkit-datetime-edit-day-field { color: darkgreen; }
::-webkit-datetime-edit-year-field { display: none; }
::-webkit-calendar-picker-indicator { display: none; }

.datepicker-container {
  display: inline;
  position: relative;
  width: 100%;
  height: 7.625rem;
}

.datepicker-input {
  padding-left: 4rem !important;
}

.datepicker-input::before{
  content:'/';
  position: relative;
  left:1.6rem;
  color: darkgreen;
}
.datepicker-input::after{
  content:'▼';
}
    <span class="datepicker-container">
  <input type="date"
         class="datepicker-input"
         name="send"
         value="2021-08-31"
  >
</span>