Czy są jakieś opcje stylu selektora dat HTML5?

Jestem naprawdę podekscytowany selektorem dat HTML5. To odświeżające wiedzieć, że W3C w końcu zbiera trochę luzu, więc nie musimy ciągle wymyślać tak powszechnej formy wprowadzania danych.

Zastrzeżenie polega na tym, że nie widzę ani nie przewiduję zbyt wiele w sposobie stosowania kolorów w samym selektorze, który w większości witryn będzie wykorzystywał rodzaj datepicker jako przełamanie transakcji. W <select>cierpi z rozpowszechnionych hacki javascript zamiennych dla tego prostego powodu, że ludzie nie mogą uczynić go dość. Ciekawe, czy ktoś wie, co się dzieje w krainie W3C?

Jest to w pewnym sensie powiązane z innym większym pytaniem (na wypadek, gdybyś znała odpowiedź): Czy warto poświęcić swój czas, aby spróbować zaangażować się w W3C lub WHATWG, aby niektóre z tych rzeczy ujrzały światło dzienne? Wszelkie spostrzeżenia są pomocne.

Następujące osiem pseudoelementów jest udostępnianych przez WebKit w celu dostosowania pola tekstowego wprowadzania daty:

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

Więc jeśli myślisz, że dane wejściowe mogą wymagać więcej odstępów i absurdalnego schematu kolorów, możesz dodać następujące elementy:

::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }

<input type="date">

Obecnie nie istnieje cross-przeglądarkowy, wolny od skryptów sposób stylizacji natywnego selektora dat.

Jeśli chodzi o to, co dzieje się wewnątrz WHATWG / W3C ... Jeśli ta funkcjonalność się pojawi, prawdopodobnie będzie zgodna ze standardem CSS-UI lub jakimś standardem związanym z Shadow DOM . W CSS4-UI strona Wiki wymienia kilka rzeczy związanych z wyglądu, które zostały wycofane z CSS3-UI, ale szczerze mówiąc, nie wydaje się wielkim zainteresowaniem w module CSS-UI.

Myślę, że najlepszym rozwiązaniem w tej chwili do rozwoju w różnych przeglądarkach jest zaimplementowanie ładnych elementów sterujących z interfejsem opartym na JavaScript, a następnie wyłączenie natywnego interfejsu użytkownika HTML5 i zastąpienie go. Myślę, że w przyszłości może istnieć lepszy styl sterowania natywnego, ale być może bardziej prawdopodobna będzie możliwość zamiany natywnego elementu sterującego na własny „widżet” Shadow DOM.

To irytujące, że nie jest to dostępne, a składanie petycji o standardowe wsparcie jest zawsze opłacalne. Chociaż wygląda na to, że prowadzenie jQuery UI próbowało i zakończyło się niepowodzeniem .

Chociaż to wszystko bardzo zniechęca, warto również rozważyć zalety selektora dat HTML5, a także dlaczego niestandardowe style są trudne i być może należy ich unikać. Na niektórych platformach datepicker wygląda zupełnie inaczej i osobiście nie mogę wymyślić żadnego ogólnego sposobu na stylizowanie natywnego datepickera.

znalazłem to na githubie Zurb

Jeśli chcesz zrobić bardziej niestandardową stylizację. Oto wszystkie domyślne ustawienia CSS do renderowania komponentów daty przez webkit.

input[type="date"] {
     -webkit-align-items: center;
     display: -webkit-inline-flex;
     font-family: monospace;
     overflow: hidden;
     padding: 0;
     -webkit-padding-start: 1px;
}

input::-webkit-datetime-edit {
    -webkit-flex: 1;
    -webkit-user-modify: read-only !important;
    display: inline-block;
    min-width: 0;
    overflow: hidden;
}

input::-webkit-datetime-edit-fields-wrapper {
    -webkit-user-modify: read-only !important;
    display: inline-block;
    padding: 1px 0;
    white-space: pre;
}

Użyłem kombinacji powyższych rozwiązań i kilku prób i błędów, aby dojść do tego rozwiązania. Zajęło mi to irytującą ilość czasu, więc mam nadzieję, że w przyszłości pomoże to komuś innemu. Zauważyłem również, że wejście selektora daty nie jest w ogóle obsługiwane przez Safari ...

Używam styled-components, aby renderować przezroczyste dane wejściowe selektora dat, jak pokazano na poniższym obrazku:

const StyledInput = styled.input`
  appearance: none;
  box-sizing: border-box;
  border: 1px solid black;
  background: transparent;
  font-size: 1.5rem;
  padding: 8px;
  ::-webkit-datetime-edit-text { padding: 0 2rem; }
  ::-webkit-datetime-edit-month-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-day-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-year-field { text-transform: uppercase; }
  ::-webkit-inner-spin-button { display: none; }
  ::-webkit-calendar-picker-indicator { background: transparent;}
`

Możesz użyć następującego CSS, aby stylizować element wejściowy.

input[type="date"] {
  background-color: red;
  outline: none;
}

input[type="date"]::-webkit-clear-button {
  font-size: 18px;
  height: 30px;
  position: relative;
}

input[type="date"]::-webkit-inner-spin-button {
  height: 28px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  font-size: 15px;
}

<input type="date" value="From" name="from" placeholder="From" required="" />

FYI, musiałem zaktualizować kolor ikony kalendarza, który nie wydaje się możliwe, o właściwościach podobnych color, fillitp

W końcu doszedłem do wniosku, że niektóre filterwłaściwości dostosują ikonę, więc chociaż nie zastanawiałem się, jak nadać jej dowolny kolor, na szczęście wszystko, czego potrzebowałem, to zrobić to, aby ikona była widoczna na ciemnym tle, więc mogłem wykonaj następujące czynności:

body { background: black; }

input[type="date"] { 
  background: transparent;
  color: white;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(100%);
}

<body>
 <input type="date" />
</body>

Mam nadzieję, że to pomaga niektórym ludziom, ponieważ w większości przypadków chrom nawet bezpośrednio mówi, że jest to niemożliwe.