twitter-bootstrap 为什么`input type="date"` 的行为改变了？

Why has the behavior of `input type="date"` changed?

提问by Jeromy French

Date inputs such as <input type="date" name="due_date" id="due_date" min="2011-09-01" maxlength="10" class="span8">in Chrome used to allow the user to see a "pop-up" calendar to help choose a date. I noticed yesterday that behavior has stopped; the input only allows the user to arrow up/down the date parts (month/day/year). I visited the Chrome blog and ran a Google search, but can't find any mention of this change. Why has the behavior of input type="date"changed?Curiously, this change seems to be limited to Bootstrap, as http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_datestill exhibits the datepicker.

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

回答by Brian Reiter

UpdateChromium team accepted the bug and submitted a patch back to WebKit. The gist of the change is that the date controls will be rendered inside a flexible box element regardless of the style applied to the input[type='date'] control.

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

---

---

I'm the one that reported the defect referenced here to Chromium. One proposed solution is to apply display: inline-block; to the calendar picker:

我是报告此处引用的 Chromium 缺陷的人。一种建议的解决方案是应用 display: inline-block; 到日历选择器：

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

However, that is a wonky solution because the controls are still shifted to a location other than right-justified on the input[type="date"] control.

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

Another option is to 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:inline-block;
    float:right;
}

This has the side-effect of inverting the spinner and calendar picker controls.

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

The best hack, I think is to remove the spinner and float right:

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

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;
}

回答by Karl Doyle

updated

更新

Found Problem

发现问题

Bootstrap uses 2 style attributes..

Bootstrap 使用 2 个样式属性..

1 - display:inline-blockwhich makes google break the arrow onto another line

1 - display:inline-block这使得谷歌将箭头折断到另一行

2 - height: 20pxwhich prevents you from seeing this "line"

2 -高度：20px防止你看到这条“线”

回答by ximi

Update

更新

The Google Chrome Issue was marked as a regression, so this will hopefully be fixed soon. As a temporary workaround, the following will work:

谷歌浏览器问题被标记为回归，所以这有望很快得到修复。作为临时解决方法，以下方法将起作用：

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

This way you can keep the inputs display property set to whatever you like and everything works as it did before.

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

Original Response

原始回复

Setting display: -webkit-inline-flex(which seems to be the default for <input type="date" />) will fix this issue, this might however alter the layout, as the input is treated like an inline element.

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

This seems like a bug to me, I'll look if someone already filed a bug report, otherwise I will.

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