Are there any style options for choosing a date in HTML5 format?

Question

I really pushed about choosing a date in HTML5 format. It’s refreshing to know that the W3C is finally gaining some of the slack, so we don’t need to constantly invent such a common input form.

The caveat is that I don’t see or expect much in the way colors are applied to the collector himself, who is going to use the datepicker type to unlock the deal on most sites. <select> suffers from widespread javascript replacement hacks for the simple reason that people cannot do it beautifully. I am wondering if anyone knows what is happening on W3C land?

This is somewhat fraught with another larger question (in case you know the answer): is it worth the time to try to connect with W3C or WHATWG so that some of these things see the light of day? Any hints are helpful.

Answer 1

The following eight pseudo-elements are available by WebKit for customizing text input:

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

So, if you think that entering a date can use a larger distance and a funny color scheme, you can add the following:

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

Answer 2

There is currently no cross browser, script is a free way to style your own date picker.

As for what happens inside the WHATWG / W3C ... If this functionality appears, it will most likely be under the CSS-UI or Shadow DOM standard. The CSS4-UI wiki page contains several appearance-related things that have been excluded from CSS3-UI, but honestly, to be of great interest in the CSS-UI module.

I think your best bet for cross-browser development right now is to implement fairly controls using a JavaScript-based interface, and then disable the native HTML5 interface and replace it. I think that in the future there may be an improved control style, but most likely it will be possible to change your own control for your own Shadow DOM widget.

It’s annoying that this is not available, and applying for standard support is always helpful. Although this is similar to jQuery UI lead I tried and failed .

While this is all very discouraging, it is also worth considering the benefits of choosing a date and time, as well as why custom styles are complex and perhaps should be avoided. On some platforms, datepicker looks completely different , and I personally cannot come up with any general way to style my feed.

Answer 3

found it on zurb github

If you want to make some more custom styles. Here is all the default CSS for rendering the date components webcast.

 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

You can use the following CSS to style the input element.

 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="" /> 

Answer 5

I used a combination of the above solutions and some trial and error to come up with this solution. It took me a lot of time, so I hope this can help someone else in the future. I also noticed that date picker input is not generally supported by Safari ...

I use styled components to render transparent date picker input, as shown in the image below:

 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

Date entry can be configured as.

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

- increments of 15 m

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