Input Type Date Appearance in Safari on Ios

iOS safari messes up input type=date

This is the way iOS treats input type="date". I wouldn't worry about native styling. It may look off, but people using iOS are used to it.

You can use min-width:95% on the date input. It makes it fit, at least in iOS 8, and doesn't change the appearance otherwise. Though I haven't tested in Android or earlier version of iOS. Alternatively, to just center it, you can add .center-block to the input, so at least it's center and doesn't look so off.

DEMO: http://jsbin.com/civor/1/

.input-min-width-95p {min-width:95%;}

HTML:

<input type="date" class="form-control input-min-width-95p" ...

HTML5 date picker doesn't show on Safari

Safari does not include a native datepicker for its desktop version (although it does for iOS). Incidentally, neither does IE. It's very frustrating as it could save developers a lot of time if they did.

This is a useful link for tracking support for it: http://caniuse.com/#feat=input-datetime

Set a value to an input type=“date” on mobile Safari using JavaScript

The final solution I went with (as I could not get Safari to recognize any input) was to change the type to text after attaching all the JavaScript hooks and adding the readonly attribute. This allowed Safari to function just like all other browsers, but still work when JavaScript is disabled.

Why is the date input squished on iphone only?

iOS Webkit is trying to add it's own styling. As stated in the comments and on this post, removing the default appearance works. Also, class="appearance-none" with Tailwind css works great too

---

Related Topics