HTML 原生 <input type="date"> 不支持 placeholder 属性，浏览器会根据系统区域设置自动显示格式化提示（如 dd/mm/yyyy），无法通过标准属性修改；若需自定义提示文字，需借助 JavaScript 动态切换输入类型并手动管理交互。
html 原生 `` 不支持 `placeholder` 属性，浏览器会根据系统区域设置自动显示格式化提示（如 dd/mm/yyyy），无法通过标准属性修改；若需自定义提示文字，需借助 javascript 动态切换输入类型并手动管理交互。
在 TYPO3 中使用 Powermail 创建表单时，若添加了日期字段（Date field），Powermail 默认渲染为 HTML5 原生 <input type="date"> 元素。关键事实是：该类型在所有主流浏览器中均不支持 placeholder 属性——即使你在 TypoScript、Fluid 模板或 Powermail 字段配置中强行添加 placeholder="请选择日期"，浏览器也会忽略它。
✅ 正确行为示例（浏览器原生表现）：
<input type="date" name="tx_powermail_pi1[field][date_field]" /> <!-- 浏览器自动显示：Chrome（en-GB）→ "DD/MM/YYYY"；Chrome（de）→ "TT.MM.JJJJ" -->
⚠️ 为什么不能直接改 placeholder？
W3C 规范明确指出：<input type="date"> 的 placeholder 属性无效且被规范废弃。其视觉提示由用户代理（浏览器 + OS 区域设置）控制，非开发者可控。
? 替代方案（推荐）：JavaScript 动态模拟
若 UX 强制要求显示自定义提示文字（如“生日（YYYY-MM-DD）”），可采用“伪 date 输入”策略：
- 初始渲染为 type="text" 并设置 placeholder；
- 用户聚焦时，临时切换为 type="date"（触发原生日期选择器）；
- 失焦或选值后，恢复为 type="text" 并保留已选日期（格式化为易读字符串）。
示例代码（放入页面 Footer 或单独 JS 文件）：
document.addEventListener('DOMContentLoaded', () => {
const dateInputs = document.querySelectorAll('input.powermail-date[type="text"][data-fake-date]');
dateInputs.forEach(input => {
const originalPlaceholder = input.placeholder || '请选择日期';
input.addEventListener('focus', function() {
this.type = 'date';
this.placeholder = ''; // 清空 placeholder，避免干扰原生控件
});
input.addEventListener('blur', function() {
if (this.value) {
// 可选：将 ISO 格式（YYYY-MM-DD）转为更友好的显示（如 DD/MM/YYYY）
const date = new Date(this.value);
if (!isNaN(date.getTime())) {
const day = String(date.getDate()).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, '0');
const year = date.getFullYear();
this.value = `${day}/${month}/${year}`;
}
}
this.type = 'text';
this.placeholder = originalPlaceholder;
});
});
});? 使用前提：
- 在 Powermail 字段配置中，为日期字段启用「Custom CSS class」，填入 powermail-date；
- 通过 TypoScript 或 Fluid 扩展，在渲染时为该输入添加 data-fake-date 属性及初始 placeholder；
- 确保该 JS 在 DOM 加载后执行，且不与 Powermail 自带 JS 冲突（建议延迟加载或封装）。
? 注意事项：
- 此方案牺牲了部分无障碍支持（screen reader 可能混淆类型切换），生产环境需配合 aria-label 补充说明；
- 移动端 Safari 对动态 type 切换兼容性较弱，建议增加 UA 检测降级为纯文本输入 + 第三方日历库（如 flatpickr）；
- 更稳健的长期方案是：在 Powermail 后端扩展中重写 DateFieldViewHelper，集成轻量级 JS 日历组件（如 vanillajs-datepicker），完全绕过原生 <input type="date"> 限制。
总结：不要试图用 placeholder “修复” 原生 date 输入——理解其设计约束，再选择语义正确、体验可控的技术路径。
