Click here to Skip to main content
15,921,226 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am working on tweaking an existing web application to be more ipad friendly. It uses the jquery date picker, which works great until you get on an ipad. In the ipad environment, it intermittently works, but is always awkward because the keyboard covers the calendar widget.

I simply extended the jquery date picker function. The extension just calls the standard jquery date picker code unless we are on an ipad. If it is an ipad then I replace the target input with <input type="date".../>

This gets me a lot closer, but it behaves very intermittently.
1. I cannnot figure out how to get the date input to show any value that I set. I have also tried setting the attribute date= to the original value. I also have tried formatting the date put into the value/date attribute in the YYY-DD-MM format rather than the default of MM/DD/YYYY that it starts with.

2. In some instances when I set the date using the ipad date picker widget that it automatically uses, nothing shows up on the control. Most of the time it works perfectly, but there are these frustrating rare cases that don't work at all.

I even download safari for windows(cringes) to try and see what it does, and it's date input is really lame. Either date format I use to set the value to start with appears fine until you try to edit it. If I click to edit it, it jumps to today's date and edits from there.

My feeling is that the date input as safari has implemented it is really poorly implemented. I have been googling this and haven't found anything meaningful.

So what is the approach to use for date inputs on an ipad? Is there something other than <input type="date".... or is there just a subtle tweak I need to make on that approach?

I had the same problem (1.) with iPhone. I managed to get it working using <input type="date" value="yyyy-MM-dd" ...="" />.

Make sure you have the MM and dd parts padded. 2011-2-9 will not work. 2011-02-09 will work from what I see. That is what I was missing.
Share this answer
I'm trying to disable the jquery UI timepicker for iOS

Using modernizr to detect if the feature is already supported... and then only use timepickers on browsers that aren't HTML5-ish

if (! {
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900