为什么`input type =“date”的行为被改变？ [英] Why has the behavior of `input type="date"` changed?

问题描述

日期输入如< input type =datename =due_dateid =due_datemin =2011-09-01maxlength =10class =span8 < / code>在Chrome中，用于允许用户查看弹出式日历以帮助选择日期。昨天我注意到行为已经停止了;输入仅允许用户向上/向下箭头按日期部分（月/日/年）。我访问了Chrome博客并运行了Google搜索，但无法提及此更改。 为什么 input type =date的行为已更改？好奇的是，此更改似乎仅限于Bootstrap，因为 http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_date still展示日期戳。

解决方案

更新
Chromium团队接受了错误并提交了< a href =https://bugs.webkit.org/show_bug.cgi?id=110974 =nofollow noreferrer>补丁回到WebKit 。
更改的要点是，无论应用于输入[type ='date']控件的样式，日期控件都将呈现在灵活的框元素中。

---

我是一个这报告了这里提到的缺陷Chromium 。一个提出的解决方案是应用显示：inline-block;到日历选择器：

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

然而，这是一个非常的解决方案，因为控件仍然转移到一个位置除了右键输入[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; 
} 
  

这有反转微调框和日历选择器控件的副作用。 / p>

最好的黑客，我认为是删除微调和浮动右边：

  input [type =date] ::  -  webkit-calendar-picker-indicator {
 display：inline-block; 
 margin-top：2％; 
 float：right; 
} 
 input [type =date] ::  -  webkit-inner-spin-button {
 / * display：none; <  - 悬停时崩溃Chrome * / 
 -webkit-appearance：none; 
 margin：0; 
} 
  

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_date still exhibits the datepicker.

解决方案

Update Chromium 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.

---

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:

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.

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:

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

这篇关于为什么`input type =“date”的行为被改变？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！