如何自定义 html5 日期选择器

Question

1. 总结问题：我正在尝试了解如何以特定方式自定义 html5 日期选择器，特别是格式类似于 [calendar icon] 8/31, Tue 并带有插入符号将打开日期选择器的权利。经过一些初步搜索后，我发现了这些用于自定义日期输入文本框的伪元素。

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

预期的结果是这些自定义选项几乎可以满足大多数自定义日期选择器的情况，但到目前为止我还无法应用这些来完全满足目标。例如，我正在尝试删除文本框中的第二个正斜杠（31 之后的/），但我不知道如何添加Tue（星期二或Mon周一，Fri 周五等）。没有错误消息。

1. 描述您尝试过的内容：

使用::-webkit-datetime-edit-year-field { display: none; } 我可以从文本框中隐藏年份，但是当我尝试使用nth-child() 伪类（以第二个/) 没有可见的变化。至于一周中一天的缩短版本（周一、周二、周三、周四、周五、周六、周日），我不知道如何实际处理（如果我找到可行的方法会更新）。

1. 显示一些代码：

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

对于视觉效果，这是它目前的样子：

理想情况下，它看起来像这样：

Answer 1

我看不到使用普通选择器来操作 shadow dom 元素的方法。您也许可以摆脱一些 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>