如何自定义html5日期选择器

Question

>

总结一下问题：我试图了解如何以特定的方式自定义html5日期选择器，具体来说，格式类似于8月31日星期二的[日历图标]，右侧带有插入符号，可以打开日期选择器。经过初步搜索，我找到了这些用于自定义日期输入文本框的伪元素。

 ::-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之后的代码），我不知道如何才能添加星期二（星期二）或星期一（星期一），星期五（星期五），等等）。没有错误消息。

使用webkit datetime编辑年份字段{显示：无；} 我可以从文本框中隐藏年份，但当我试图将第二个日期选择器（使用HTML5日期选择器有没有样式选项？作为参考点）与第n-子类（以第二个日期选择器为目标）结合使用时，没有明显的变化。至于一周中的一天的缩短版本（周一、周二、周三、周四、周五、周六、周日），我不知道如何实际实现这一点（如果找到可行的方法，我会更新）。

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

我看不到用普通选择器操纵阴影dom元素的方法。你也许可以通过一些黑客手段逃脱惩罚：

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