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

Question

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.

Answer 1

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