Dlaczego zmieniło się zachowanie `input type =" date "`?

Question

Daty wejściowe, takie jak <input type="date" name="due_date" id="due_date" min="2011-09-01" maxlength="10" class="span8"> w przeglądarce Chrome, umożliwiają użytkownikowi wyświetlenie "wyskakującego" kalendarza w celu wybrania daty. Zauważyłem wczoraj, że zachowanie się zatrzymało; wejście tylko pozwala użytkownikowi na strzałkę w górę/w dół części daty (miesiąc/dzień/rok). Odwiedziłem blog Chrome i przeszukałem wyszukiwarkę Google, ale nie mogę znaleźć żadnej wzmianki o tej zmianie. Dlaczego zmieniło się zachowanie input type="date"? Co ciekawe, zmiana ta wydaje się być ograniczona do Bootstrap, ponieważ http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_date nadal wyświetla datepicker.

Answer 1

Aktualizacja Chrom zespół przyjął błąd i przedstawiła patch back to WebKit. Istotą zmiany jest to, że elementy sterujące datą będą renderowane wewnątrz elastycznego elementu pola, niezależnie od stylu zastosowanego do kontrolki input [type = 'date'].

---

Jestem tym that reported the defect referenced here to Chromium. Jednym z proponowanych rozwiązań jest zastosowanie wyświetlania: wbudowany blok; do kompletacji Kalendarz:

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

jednak, że jest słaby rozwiązanie, ponieważ kontrole są ciągle przesuwane do lokalizacji innej niż prawym uzasadnione na wejściu [type = „data”] kontrolnej.

Inną opcją jest unosić rację:

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

Ma to efekt uboczny odwrócenie kontroli Spinner i kalendarz Picker.

Najlepszym hack, myślę, że jest usunięcie tarczy i pływak rację:

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

aktualizowane

Znaleziony Problem

Bootstrap wykorzystuje atrybuty 2 styl ..

1 - display: inline-block co sprawia, google złamać strzałkę na innej linii

2 - wysokość: 20px, który uniemożliwia obejrzeniu tego „linia”

Answer 3

Aktualizacja

Google Chrome Problem został oznaczony jako regres, więc miejmy nadzieję, zostanie wkrótce naprawione. Jako tymczasowe obejście dodaje zadziała:

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

W ten sposób można utrzymać nakłady wyświetlić właściwości ustawione na co chcesz i wszystko działa jak przedtem.

Original Response

Ustawianie display: -webkit-inline-flex (co wydaje się być domyślna dla <input type="date" />) będzie rozwiązać ten problem, to może jednak zmieniać układ, ponieważ wejście jest traktowany jak element inline.

Wydaje mi się, że to błąd, sprawdzę, czy ktoś już zgłosił błąd, w przeciwnym razie.