1

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

Michael M.
  • 10,486
  • 9
  • 18
  • 34
izzy
  • 85
  • 1
  • 7
  • Do you have a sample screeshot of what you want it to look like? – Charlie Sep 01 '21 at 04:38
  • Please also be advised that using webkit prefixed selectors means it wont affect any other browser. – Charlie Sep 01 '21 at 04:40
  • @Charlie I added a screenshot sample of what I would like it to look like. I also did not even consider that the webkit prefixed selectors would only apply to Safari/Chrome. Thanks for pointing that out! – izzy Sep 01 '21 at 10:20

1 Answers1

1

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>
Charlie
  • 8,530
  • 2
  • 55
  • 53
  • This isn't exactly the route I ended up going, but it is similar and I think this would be a good possible solution for people who search for an answer to the above problem I had (I couldn't find really any solutions for this specific problem beforehand). What I ended up doing was hacky as well, and basically used ``` ::-webkit-calendar-picker-indicator { cursor: pointer; color: transparent; background: none; z-index: 1; } ``` and then just placed the caret icon directly over it using position, top, and right. Thank you for your help @Charlie! – izzy Sep 01 '21 at 21:41
  • 1
    Another option is placing the picker behind a display if your own construction, with pointer-events: none set on it; clicks will pass through to the datepicker underneath. – Charlie Sep 02 '21 at 01:09