如何获取HTML Date输入框中实际显示的本地化日期字符串？

问题原因 #

原生 <input type="date"> 的渲染逻辑由浏览器内核内部实现，展示文本、占位符、交互控件都不属于开放给页面脚本的DOM结构，也不会暴露对应的Shadow Root，所以你读取shadowRoot会返回null，innerText/innerHTML这类DOM属性也不可能拿到展示内容。
同时W3C规范明确规定：type="date"的输入框value属性永远返回YYYY-MM-DD格式的ISO标准日期，目的是保证不同区域、不同浏览器下的取值逻辑统一，不会随展示格式变化。

解决方案 #

1. 获取和UI一致的本地化日期字符串 #

你可以先拿到输入框的ISO格式值，再用JS内置的Intl.DateTimeFormat API格式化，该API默认调用的是当前用户的系统/浏览器区域设置，和原生日期输入框的渲染locale完全一致：

// Angular 代码示例
@ViewChild("dateField") el: ElementRef<HTMLInputElement>;

onClick() {
  const dateValue = this.el.nativeElement.value;
  if (!dateValue) return;
  const date = new Date(dateValue);
  // 按用户locale格式化，可自定义日期各部分的展示形式
  const localizedDateStr = new Intl.DateTimeFormat(navigator.language, {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  }).format(date);
  console.log(localizedDateStr); // 输出类似 16-Sep-2021、2021年9月16日 等对应locale的格式
}

2. 获取对应locale与占位符 #

• 渲染日期用到的locale直接取navigator.language即可，和浏览器渲染原生日期输入的区域配置一致。
• 原生输入框的默认占位符没有开放直接读取的API，你可以通过Intl.DateTimeFormat自行生成和浏览器占位符格式一致的提示文本：

const formatParts = new Intl.DateTimeFormat(navigator.language).formatToParts();
const placeholder = formatParts.map(part => {
  switch(part.type) {
    case 'day': return 'dd';
    case 'month': return 'mm';
    case 'year': return 'yyyy';
    default: return part.value;
  }
}).join('');
// 输出结果和浏览器默认占位符一致，比如 dd/mm/yyyy、mm/dd/yyyy 等

补充建议 #

如果对日期选择器的展示样式、交互逻辑有强定制需求，建议不要使用原生type="date"输入，不同浏览器的实现差异很大，替换为Angular Material Datepicker、ngx-bootstrap Datepicker等第三方组件，可完全自定义格式、样式，也能直接读取展示文本。

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