Чи є варіанти стилю для вибору дати HTML5?

Мені дуже цікаво вибирати дату HTML5. Освіжаючий факт знати, що W3C нарешті збирає частину слабкості, тому нам не доведеться продовжувати переосмислювати таку поширену форму введення.

Застереження полягає в тому, що я не бачу і не передбачую багато в способі застосування кольорів до самого вибору, який збирається використовувати тип вибору дати на основі більшості сайтів. У <select>страждає від широко розповсюджених Javascript замінюють хаков з тієї простої причини , що люди не можуть зробити це досить. Мені цікаво, чи хтось знає, що відбувається на землі W3C?

Це дещо в поєднанні з ще одним великим питанням (якщо ви знаєте відповідь): чи варто мого часу спробувати долучитися до W3C або WHATWG, щоб деякі з цих речей побачили світло дня? Будь-які відомості корисні.

Наступні вісім псевдоелементів надає WebKit для налаштування текстового поля введення дати:

::-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

Тож якщо ви думаєте, що введення дати може використовувати більше інтервалів та смішну колірну гаму, ви можете додати наступне:

::-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">

Наразі не існує перехресного веб-переглядача, без скриптів, як вибрати стильний інструмент вибору дати.

Що стосується того, що відбувається всередині WHATWG / W3C ... Якщо ця функціональність з'явиться, вона, ймовірно, буде відповідати стандарту CSS-UI або деякому стандарту Shadow DOM . На вікі-сторінці CSS4-UI перераховано декілька речей, пов’язаних із зовнішністю, які були викинуті з CSS3-UI, але якщо чесно, схоже, що модуль CSS-UI не викликає великого інтересу.

Я думаю, що найкраще зараз для розробки крос-браузерів - реалізувати гарні елементи керування за допомогою інтерфейсу на базі JavaScript, а потім відключити нативний інтерфейс HTML5 та замінити його. Я думаю, що в майбутньому, можливо, буде краща стильна система управління, але, можливо, більш ймовірною буде можливість замінити нативний елемент управління на власний "віджет" Shadow DOM.

Прикро, що це недоступно, і клопотання про стандартну підтримку завжди варто. Незважаючи на те, що, схоже, ведучий інтерфейсу jQuery UI намагався і невдало .

Хоча це все дуже відлякує, також варто врахувати переваги вибору дати HTML5, а також, чому користувацькі стилі є складними та, можливо, цього слід уникати. На деяких платформах датчик вибору виглядає надзвичайно по-іншому, і я особисто не можу придумати будь-який загальний спосіб стилізації рідного датчика.

знайшли це на гетбі Зурба

У випадку, якщо ви хочете зробити ще кілька спеціальних стилів. Ось весь CSS за замовчуванням для візуалізації веб-компонентів компонентів дати.

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

Я використовував комбінацію вищезазначених рішень та деякі спроби та помилки, щоб прийти до цього рішення. Зайняв у мене надокучливу кількість часу, тому я сподіваюся, що це може допомогти комусь іншому в майбутньому. Я також зауважив, що Safari взагалі не підтримує введення вибору дат ...

Я використовую стильові компоненти для відображення прозорого введення вибору дати, як показано на зображенні нижче:

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

Для стильового введення елемента можна використовувати наступний CSS.

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, мені потрібно оновити колір значка календаря , який не представляється можливим з властивостями , як color, fillі т.д.

Зрештою filterя з'ясував , що деякі властивості будуть коригувати піктограму, тому поки я не зрозумів, як зробити її будь-яким кольором, на щастя, все, що мені потрібно було зробити це, щоб піктограма була помітна на темному тлі, щоб я міг зробіть наступне:

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>

Сподіваємось, це допомагає деяким людям, оскільки здебільшого хром навіть безпосередньо каже, що це неможливо.