如何自定义HTML5 date picker实现指定的日期显示格式

我想要自定义HTML5日期选择器，实现*[日历图标] 8/31, Tue*的显示格式，右侧带有可打开日期选择器的展开箭头。初步搜索后，我找到了以下可用于自定义日期输入文本框的伪元素：

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

原本预期这些自定义选项基本能满足大部分日期选择器定制需求，但我目前还无法通过这些配置完全达成目标。比如我想要去掉文本框中31后面的第二个正斜杠/，同时还要添加星期短缩写（如代表周二的Tue、代表周一的Mon、代表周五的Fri等），目前没有报错信息。

我已经通过::-webkit-datetime-edit-year-field { display: none; }成功隐藏了文本框中的年份，参考相关技术资料尝试使用nth-child()伪类选中第二个/的操作没有出现任何可见变化。至于添加星期短缩写（Mon、Tue、Wed、Thur、Fri、Sat、Sun）的需求，我暂时还没有实现思路，找到可行方案后会更新内容。

现有实现代码如下：

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

/* 该写法没有生效 */
::-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>

当前实现的效果截图如下：

理想实现的效果截图如下：

内容的提问来源于stack exchange，提问作者izzy