如何在 HTML type=\"date\" 输入中阻止 Safari 16 (macOS) 默认为当前日期？答案

【问题标题】：How to stop Safari 16 (macOS) defaulting to the current date in a HTML type="date" input?如何在 HTML type=\"date\" 输入中阻止 Safari 16 (macOS) 默认为当前日期？
【发布时间】：2022-09-27 19:05:30
【问题描述】：

尝试在未选择日期时使 Safari 日期字段为空白（即不默认为今天的日期），但我似乎无法弄清楚。

当没有给出日期值时，所有其他浏览器都不会预先填写日期字段，例如。

<input type=\"date\" />

然而 Safari 坚持它应该显示一个占位符，比如今天日期的值。

尝试像下面这样覆盖占位符样式似乎没有任何效果：

input[type=\"data\"]::placeholder {
    color: transparent; /* Or any colour/display: none/etc */
}


input[type=\"data\"]:placeholder-shown {
    color: transparent; /* Or any colour/display: none/etc */
}

将值设置为空字符串或类似的值也没有效果，将占位符值设置为其他任何值都不会做任何事情。

标签： html safari

【解决方案1】：

有几个伪类可用于 webkit 浏览器上的日期字段。在 Safari 中，为了能够看到它们，您可以检查元素并进入影子根。在日期字段的阴影根中，您将找到带有 psuedo 属性的 div 元素，该属性提示可用的伪选择器：

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-day-field 
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-year-field 
::-webkit-datetime-edit-text

这允许您单独设置日期的每个部分的样式。很遗憾，您不能使用 :placeholder-shown 定位占位符值。

目前，除非我弄错了，否则这意味着在 macOS 上的 Safari 16 中，如果没有一些 javascript，就不可能摆脱占位符。

相反，您可以做的是使用 onchange 事件在 Javascript 中跟踪输入是否具有值并应用类。然后，这将允许您在应用类时使用上述伪选择器选择日期字段的各个元素。

例如（在常规 html/js 中）：

<style>
    input[type="date"]::-webkit-datetime-edit-day-field, 
    input[type="date"]::-webkit-datetime-edit-month-field, 
    input[type="date"]::-webkit-datetime-edit-year-field {
        opacity: var(--field-opacity, 0);
    }

    input[type="date"].has-value {
        --field-opacity: 1;
    }
</style>

<input type="date" id="my-date" />
<script>
    const dateField = document.getElementById('my-date');
    dateField.addEventListener('change', (ev) => {
        if (ev.target.value) {
        ev.target.classList.add('has-value');
        } else {
        ev.target.classList.remove('has-value');
        }
    });
</script>

当然，您可能希望在您选择的框架中使此代码可重用。

【讨论】：