On the Acmodation tab of this page, there are a couple of date fields that use this datepicker. Everything works fine on a desktop browser, but when the page is viewed on an iPhone the dates are shown below the fields:

Incidentally, I tried upgrading from the current (deprecated) datepicker to this newer version, but it didn't work out.

On the Acmodation tab of this page, there are a couple of date fields that use this datepicker. Everything works fine on a desktop browser, but when the page is viewed on an iPhone the dates are shown below the fields:

Incidentally, I tried upgrading from the current (deprecated) datepicker to this newer version, but it didn't work out.

• javascript
• html
• css

• It displays like this in Safari for Mac too, btw. – william44isme Commented Mar 28, 2013 at 9:01
• It displays correctly in my version of Safari. 5.1.8 on OS X 6 – kristina childs Commented Apr 1, 2013 at 20:05

3 Answers 3

I looked a little through the code and I found out that a declaration in one of the css included is what's causing the problem. You seem to merge all your style so I don't know exactly in which one is it (datepicker.css ?), anyway, the declaration

 .datepicker:before{content:''; display:inline-block;}

Is what's causing the problem. I don't know exactly the purpose of that in the grand scheme, but just deleting the declaration, or changing the display type from inline-block to block, makes everything all right.

Try to investigate starting from there,avoiding to break the style for other browsers already working, and understand the meaning of those inline-block, since they're present in both .datepicker:beforeand .datepicker:after

Try CSS:

#booking label { width: 100% }

or something like that with width parameter or maybe:

#booking label { display: block; }

Instead of using a third party datepicker, it is possible since iOS 5 to use a native datepicker:

<input type="date">

It is also possible to check if the browser supports input type="date". You could go the way of using the native solution of the browser, if available, and use the third party datepicker as fallback.