Question

我对HTML5日期选择器非常感兴趣。令人耳目一新的是，W3C终于找到了一些懈怠，所以我们不必继续重新发明这种常见的输入形式。

需要注意的是，我没有看到或预见到将颜色应用于拾取器本身的方式，这将使得在大多数网站上使用日期选择器类型的交易破坏者。 <select>遭受广泛的javascript替换黑客攻击，原因很简单，人们无法做到漂亮。我很好奇是否有人知道W3C土地上发生了什么？

这与另一个更大的问题（如果你知道答案）有点配对：我是否值得花时间尝试参与W3C或WHATWG，以便其中一些事情能够看到光明的一天？任何形式的见解都是有帮助的。

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

Screenshot

Answer 2

目前，没有跨浏览器，无脚本的方式来设置本机日期选择器的样式。

至于WHATWG / W3C内部发生了什么...... 如果确实出现此功能，则可能符合CSS-UI标准或某些Shadow DOM相关标准。 CSS4-UI wiki page列出了一些与CSS3-UI相关的外观相关内容，但老实说，似乎并没有对CSS-UI模块产生很大的兴趣。

我认为现在跨浏览器开发最好的选择是使用基于JavaScript的界面实现漂亮的控件，然后禁用HTML5本机UI并替换它。我认为将来可能会有更好的原生控制样式，但也许更有可能是为你自己的Shadow DOM＆＃34; widget＆＃34;交换原生控件的能力。

令人讨厌的是，这是不可用的，并且请求标准支持总是值得的。虽然它看起来像jQuery UI的主角has tried and was unsuccessful。

虽然这一点非常令人沮丧，但也值得考虑HTML5日期选择器的优点，以及为什么自定义样式很难并且应该避免。在某些平台上，datepicker looks extremely different和我个人无法想到使用本机日期选择器的任何通用方式。

Answer 3

在Zurb's github

上找到了这个

如果您想要进行更多自定义样式。这就是全部用于webkit呈现日期组件的默认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;
}

Answer 4

您可以使用以下CSS来设置输入元素的样式。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

我结合使用了上述解决方案和一些反复试验得出的解决方案。花了我很烦的时间，希望以后能对其他人有所帮助。我还注意到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;}
`

Answer 6

仅供参考，我需要使用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>

希望这对大多数人来说可以帮助铬，甚至直接说这是不可能的。

Answer 7

日期时间输入可以自定义为。

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

- 增量为15米

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

HTML5日期选择器有任何样式选项吗？

7 个答案: