为啥 `input type="date"` 的行为发生了变化？

Posted 2023-03-05

【中文标题】为啥 `input type="date"` 的行为发生了变化？

【英文标题】：Why has the behavior of `input type="date"` changed?为什么 `input type="date"` 的行为发生了变化？

【发布时间】：2013-02-10 19:27:48

【问题描述】：

日期输入（例如 Chrome 中的 <input type="date" name="due_date" id="due_date" min="2011-09-01" maxlength="10" class="span8">）用于允许用户查看“弹出式”日历以帮助选择日期。我昨天注意到行为已经停止；输入仅允许用户向上/向下箭头日期部分（月/日/年）。我访问了 Chrome 博客并运行了 Google 搜索，但找不到任何有关此更改的信息。 为什么 input type="date" 的行为发生了变化？ 奇怪的是，这种变化似乎仅限于 Bootstrap，因为 http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_date 仍然显示日期选择器。

【问题讨论】：

已经使用 Bootstrap CSS 创建了一个 JSFiddle，并且似乎不会影响 Chrome 的弹出窗口 - jsfiddle.net/BxVDx/3

我刚刚确认这是一个 Bootstrap 问题，方法是转到 Bootstrap 的文档并将<label for="date1">Choose date</label><input type="date" name="date1" id="date1">“插入”到twitter.github.com/bootstrap/base-css.html#forms 的默认表单示例中。

@PirateKitten：我确实在你的小提琴中看到了这个问题。我正在使用 Chrome....版本 25.0.1364.97 m。你？

是的，刚刚确认我的 Chrome 有点过时了，已经更新，现在可以看到您所描述的内容，因此 Chrome 的行为已经按照您的想法发生了变化。抱歉，我丢失了我使用的版本，所以我无法引用它。

@PirateKitten: NP--感谢第二个数据点！

【参考方案1】：

更新 Chromium 团队接受了该错误并提交了patch back to WebKit。 更改的要点是日期控件将在灵活的框元素内呈现，而不管应用于 input[type='date'] 控件的样式如何。

---

我是that reported the defect referenced here to Chromium。一种建议的解决方案是应用 display: inline-block;到日历选择器：

input[type="date"]::-webkit-calendar-picker-indicator
    display:inline-block;

但是，这是一个不稳定的解决方案，因为控件仍然移动到 input[type="date"] 控件上的右对齐以外的位置。

另一种选择是向右浮动：

input[type="date"]::-webkit-calendar-picker-indicator 
    display:inline-block;
    margin-top:2%;
    float:right;

input[type="date"]::-webkit-inner-spin-button 
    display:inline-block;
    float:right;

这具有反转微调器和日历选择器控件的副作用。

我认为最好的技巧是移除微调器并向右浮动：

input[type="date"]::-webkit-calendar-picker-indicator
    display:inline-block;
    margin-top:2%;
    float:right;

input[type="date"]::-webkit-inner-spin-button 
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;

【讨论】：

请注意，如果您浮动一个元素，它的显示将设置为block，因此尝试将其设置为其他任何内容都没有意义。请参阅this CSS Tricks article，或者看看 Chrome 开发工具中的计算样式。说到这些工具，人们可能不知道您可以转到 Settings>Elements>Show Shadow DOM 以查看此答案中引用的元素（-webkit-inner-spin-button 等）。

Chrome 版本 26.0.1410.43 m 再次正确显示所有内容。

【参考方案2】：

更新

Google Chrome 问题已被标记为回归，因此有望很快得到解决。 作为临时解决方法，以下方法将起作用：

input[type=date]::-webkit-calendar-picker-indicator 
    display: inline-block;

这样，您可以将输入显示属性设置为您喜欢的任何内容，并且一切都像以前一样工作。

原始回复

设置display: -webkit-inline-flex（这似乎是<input type="date" /> 的默认值）将解决此问题，但这可能会改变布局，因为输入被视为内联元素。

这对我来说似乎是一个错误，我会看看是否有人已经提交了错误报告，否则我会。

【讨论】：

Chromium bugtracker 中存在问题，请随时为它加注星标，以便在有更新时收到通知并表达您对解决此问题的兴趣：code.google.com/p/chromium/issues/…

参考我之前的评论:)

谢谢@ximi。我还开了一张 Bootstrap 票：github.com/twitter/bootstrap/issues/7061

@KarlDoyle，删除属性和重置它不一定相同。

@JeromyFrench 我不确定引导人员是否会修复它，因为他们的代码并没有任何问题，但是 chrome 的实现。我只是希望谷歌的人能解决它

【参考方案3】：

更新

发现问题

Bootstrap 使用 2 个样式属性..

1 - display:inline-block 让谷歌打破箭头到另一行

2 - height: 20px 防止您看到这条“线”

【讨论】：

当我禁用 padding 时，我看到了类似的变化。