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

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

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

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

5 74
html5 datepicker w3c

5 ответов:

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

Screenshot

170

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

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

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

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

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

16

нашел на github зурба

в случае, если вы хотите сделать некоторые пользовательские стайлинга. Вот и все CSS, используемую по умолчанию для рендеринга 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;
}
7

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

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

<input type=date step=7 min=2014-09-08> - Monday only

- 15м шагом

http://www.wufoo.com/html5/types/4-date.html

-9