如何修改HTML5中date类型input的默认占位符？

嘿，这个问题我之前踩过坑！HTML5的<input type="date">自带的默认占位文本（比如你图里的格式提示）是浏览器原生内置的，直接用placeholder属性或者乱改value确实没用——因为浏览器根本不把这俩属性当成修改原生占位符的依据😅

为什么直接设置没用？ #

因为date类型的input是浏览器专门渲染的控件，它的占位提示属于浏览器UI的一部分，不是普通input的placeholder属性能控制的。而且value属性是用来设置默认选中的日期，不是占位文本，所以当然无效。

两种可行的解决方案 #

方案1：用CSS伪元素自定义（webkit内核浏览器适用）

针对Chrome、Edge、Safari这类webkit内核的浏览器，可以通过CSS伪元素隐藏原生的占位文本，再添加自己的提示内容：

/* 隐藏原生的日期占位文本 */
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    color: transparent;
}

/* 添加自定义占位符，仅在未聚焦且无值时显示 */
input[type="date"]:not(:focus):not(:valid):before {
    content: "请选择日期"; /* 替换成你想要的占位文本 */
    color: #999;
}

注意：这个方法只对webkit内核浏览器生效，Firefox的处理逻辑不同，可能需要额外适配。

方案2：用自定义输入框模拟（全兼容）

如果需要兼容所有浏览器，或者想要完全自定义显示样式，最稳妥的方式是用一个普通文本框模拟显示，把原生的date input隐藏在背后，通过JS同步值：

<div class="custom-date-wrapper">
    <input type="text" placeholder="请选择日期" id="date-display" readonly>
    <input type="date" id="real-date-input" style="position: absolute; opacity: 0; pointer-events: none;">
</div>

<script>
const displayInput = document.getElementById('date-display');
const realInput = document.getElementById('real-date-input');

// 点击显示框触发原生日期选择器
displayInput.addEventListener('click', () => {
    realInput.click();
});

// 同步选中的日期到显示框，还可以自定义日期格式
realInput.addEventListener('change', () => {
    if (realInput.value) {
        const date = new Date(realInput.value);
        // 格式化为「YYYY年MM月DD日」的样式，你可以改成任意格式
        displayInput.value = `${date.getFullYear()}年${(date.getMonth()+1).toString().padStart(2, '0')}月${date.getDate().toString().padStart(2, '0')}日`;
    } else {
        displayInput.value = '';
    }
});
</script>

这种方式不仅能自定义占位符，还能自由控制日期的显示格式，兼容性拉满。

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