11

日期输入（例如<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仍然显示日期选择器。

4

3 回答 3

15

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

我是向 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;
}

铬 25 输入[类型=

于 2013-02-27T08:13:12.917 回答
6

更新

发现问题

Bootstrap 使用 2 个样式属性。

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

2 - height: 20px阻止你看到这条“线”

调查结果截图

于 2013-02-25T21:27:13.710 回答
2

更新

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

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

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

原始回复

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

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

于 2013-02-26T05:24:49.313 回答