javascript - date fields displayed incorrectly on iPhone - Stack Overflow

admin管理员组

文章数量:1022488

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

Share Improve this question Follow edited Mar 25, 2013 at 2:04 Dónal asked Mar 25, 2013 at 1:42 DónalDónal 188k177177 gold badges586586 silver badges844844 bronze badges 2

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7 +25

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.

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

Share Improve this question Follow edited Mar 25, 2013 at 2:04 Dónal asked Mar 25, 2013 at 1:42 DónalDónal 188k177177 gold badges586586 silver badges844844 bronze badges 2

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7 +25

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.

本文标签： javascriptdate fields displayed incorrectly on iPhoneStack Overflow