2

HTML natively has a date input:

<input type ="date"/> 

(Codepen here: https://codepen.io/dwjohnston/pen/zmwRQV).

It comes with a date picker etc.

However, I've just noticed that I don't usually see it. Usually websites either get you to enter your own slashes into a textbox, or select from three dropdowns.

Is there a reason that this isn't being used?

2 Answers 2

1

I would imagine it's mainly down to lack of consistent support across browsers, mainly Firefox and IE11 (which doesn't work at all). That coupled with the fact you are unable to style it in any useful way so it has the tendency to appear out of place and a bit ugly.

Also the datepicker part is not accessible for keyboard users, so if accessibility matters to you (and it should) then this also makes it a non-starter.

Most people will use a well tested Javascript alternative or roll their own which then means you have total control with how it appears and behaves across all browsers.

1
  • 1
    It is keyboard accessible via direct input (not the modal) though.
    – mrchaarlie
    Oct 12, 2018 at 15:21
1

There hasn't been widespread browser support for long enough. There is still no support in IE or Safari, and only recent support in Firefox. I'm speculating now, but based on past experiences it may also be hard to style the built-in datepickers to fit with your app (and provide a consistent look-and-feel between browsers).

It would be possible to use the built-in datepicker on browsers that support it, and a JavaScript implementation on other browsers, but I (and likely others) would prefer to just use the JavaScript version on all browsers because of the aforementioned styling and consistency issues, as well as perhaps extra functionality – type="select" has been around for a long time, and that market is still thriving.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.