如何让原生HTML datetime-local输入框仅显示日期选择图标，适配Angular项目

原生datetime-local实现方案（无第三方依赖，功能无影响） #

方案1：图标覆盖法（兼容性最好，全浏览器适用） #

不需要修改原生input的内置伪类，通过层级覆盖实现视觉上仅显示图标，点击正常触发选择面板，*ngFor循环中使用也完全兼容：

示例代码

HTML部分：

<div class="datetime-trigger">
  <!-- 用你需要的图标即可，这里用的是Angular Material自带图标 -->
  <mat-icon>date_range</mat-icon>
  <input 
    type="datetime-local" 
    [id]="'test' + row.id" 
    [name]="'test' + row.id"
    (change)="handleDateSelect(row, $event)"
  >
</div>

CSS部分：

.datetime-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.datetime-trigger input {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
}

这个方案不会修改原生input的任何逻辑，仅将input透明覆盖在图标上方，点击区域会触发原生的日期选择面板，完全没有功能异常的问题。

方案2：直接修改input样式（webkit内核浏览器适用） #

如果不需要兼容Firefox等非webkit内核浏览器，可以直接用以下CSS隐藏多余元素，仅保留选择图标：

input[type="datetime-local"] {
  border: none;
  background: transparent;
  width: 24px;
  padding: 0;
  color: transparent;
}

/* 隐藏清除按钮 */
input[type="datetime-local"]::-webkit-clear-button {
  display: none;
}

/* 隐藏日期编辑区域和占位文本 */
input[type="datetime-local"]::-webkit-datetime-edit {
  display: none;
}

/* 调整选择图标位置 */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  margin-left: 0;
  cursor: pointer;
}

适配Angular生态的日期时间选择器推荐 #

如果你需要更统一的样式、更强的自定义能力，推荐以下两个和Angular适配性好的组件，不会出现样式冲突问题：

• 如果你用Angular Material技术栈，推荐用@mat-datetimepicker/core，完全遵循Material Design规范，支持配置为仅图标触发，和Angular Material的表格、表单体系无缝兼容。
• 也可以选择PrimeNG的Calendar组件，支持日期时间同时选择，样式可定制程度高，支持响应式表单、模板表单两种使用方式。

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