Существуют ли какие-либо опции стиля для выбора даты в формате HTML5?

Я действительно толкнул насчет выбора даты в формате HTML5. Освежающе знать, что W3C, наконец, набирает часть слабины, поэтому нам не нужно постоянно изобретать такую ​​общую форму ввода.

Предостережение заключается в том, что я не вижу или не предвижу многого в способе применения цветов к самому сборщику, который собирается использовать тип datepicker для разблокировки сделки на большинстве сайтов. <select> страдает от широко распространенных взломов javascript-замены по той простой причине, что люди не могут сделать это красиво. Мне интересно, если кто-нибудь знает, что происходит на земле W3C?

Это несколько сопряжено с другим более крупным вопросом (в случае, если вы знаете ответ): стоит ли потратить время, чтобы попытаться связать себя с W3C или WHATWG, чтобы некоторые из этих вещей видели свет в день? Любые подсказки полезны.

Ответы

Ответ 1

Следующие восемь псевдоэлементов доступны 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">

Ответ 2

В настоящее время нет перекрестного браузера, script -бесплатный способ стилизации собственного выбора даты.

Что касается того, что происходит внутри WHATWG/W3C... Если эта функциональность появится, она, скорее всего, будет находиться под стандартом CSS-UI или Shadow DOM. Страница CSS4-UI wiki содержит несколько связанных с внешним видом вещей, которые были исключены из CSS3-UI, но, честно говоря, чтобы представлять большой интерес в модуле CSS-UI.

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

Досадно, что это недоступно, и ходатайство о стандартной поддержке всегда полезно. Хотя это похоже на jQuery UI lead пробовал и не увенчался успехом.

В то время как это все очень обескураживает, стоит также рассмотреть преимущества выбора даты и времени, а также, почему пользовательские стили сложны и, возможно, их следует избегать. На некоторых платформах datepicker выглядит совершенно другим, и я лично не могу придумать какой-либо общий способ стилизации родного фида.

Ответ 3

нашел это на Zurb github

Если вы хотите сделать еще несколько пользовательских стилей. Здесь все 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;
}

Ответ 4

Вы можете использовать следующий 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="" />

Ответ 5

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

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

image of date picker input

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