Tại sao hành vi của `input type =" date "` bị thay đổi?

Question

Các mục nhập ngày tháng như <input type="date" name="due_date" id="due_date" min="2011-09-01" maxlength="10" class="span8"> trong Chrome được sử dụng để cho phép người dùng xem lịch "cửa sổ bật lên" để giúp chọn ngày. Tôi nhận thấy ngày hôm qua rằng hành vi đã dừng lại; đầu vào chỉ cho phép người dùng mũi tên lên/xuống các phần ngày (tháng/ngày/năm). Tôi đã truy cập blog Chrome và chạy tìm kiếm trên Google nhưng không thể tìm thấy bất kỳ đề cập nào về thay đổi này. Tại sao hành vi của input type="date" bị thay đổi? Thật kỳ lạ, thay đổi này dường như bị giới hạn đối với Bootstrap, vì http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_date vẫn hiển thị ngày tháng.

Answer 1

Cập nhật Nhóm Chromium chấp nhận lỗi và gửi patch back to WebKit. Ý chính của thay đổi là các điều khiển ngày sẽ được hiển thị bên trong phần tử hộp linh hoạt bất kể kiểu được áp dụng cho điều khiển nhập [loại = 'ngày'].

---

Tôi là một trong số that reported the defect referenced here to Chromium. Một giải pháp được đề xuất là áp dụng display: inline-block; vào bộ chọn lịch:

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

Tuy nhiên, đó là giải pháp khả quan vì các điều khiển vẫn được chuyển sang vị trí khác với quyền được kiểm soát trên đầu vào [loại = "ngày"].

lựa chọn khác là nổi ngay:

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

này có tác dụng phụ của đảo ngược các spinner và chọn lịch điều khiển.

tốt nhất hack, tôi nghĩ là để loại bỏ các spinner và nổi phải:

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

Answer 2

cập nhật

Tìm thấy vấn đề

Bootstrap sử dụng 2 kiểu thuộc tính ..

1 - display: inline-block mà làm cho google phá vỡ các mũi tên lên dòng khác

2 - chiều cao: 20px mà ngăn không cho bạn thấy điều này "dòng"

Answer 3

Cập nhật

Vấn đề Google Chrome đã được đánh dấu là một hồi quy, vì vậy đây hy vọng sẽ sớm được khắc. Là một workaround tạm thời, sau đây sẽ làm việc:

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

Bằng cách này bạn có thể giữ cho đầu vào hiển thị bất động sản thiết lập để bất cứ điều gì bạn thích và mọi thứ hoạt động như nó đã làm trước đó.

gốc đáp ứng

Thiết display: -webkit-inline-flex (mà dường như là mặc định cho <input type="date" />) sẽ khắc phục vấn đề này, tuy nhiên điều này có thể làm thay đổi cách bố trí, như các đầu vào được đối xử như một yếu tố nội tuyến.

Điều này có vẻ như một lỗi đối với tôi, tôi sẽ xem liệu có ai đó đã gửi báo cáo lỗi hay không.