Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
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?
Posted 11-Nov-11 7:57am
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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.
  Permalink  
v2
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

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 (!Modernizr.inputtypes.date) {
    $("input[type=date]").datepicker();
}
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 7,903
1 Sergey Alexandrovich Kryukov 7,192
2 DamithSL 5,604
3 Manas Bhardwaj 4,986
4 Maciej Los 4,820


Advertise | Privacy | Mobile
Web03 | 2.8.1411023.1 | Last Updated 12 Nov 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100