What is best way to show Date Picker for iPhone based Web Application. Can we show something like iPhone native date picker like shown below in web application:
Asked
Active
Viewed 9.6k times
51
-
2Please adjust the answer to one more appropriate. We dont need an external package that cubiq uses, where as there is an easier way. – Fallenreaper Feb 06 '13 at 17:48
-
See also http://stackoverflow.com/questions/4946919/invoke-native-date-picker-from-web-app-on-ios-android – Daniel Trebbien May 30 '13 at 18:48
9 Answers
128
The easiest way (and arguably the best way) is to use safari's built in datepicker for your input box using HTML5 type="date"
<input type="date" />
Kyle
- 2,645
- 3
- 21
- 8
-
4This just saved me SO much time and effort, it felt great to just stick this on my site and watch the nifty little date picker appear on my iPhone. – Andrew Mar 14 '12 at 14:50
-
1And what about dropping it down when type="date" doesnt work? e.g. responsive site design? – Dave Walker Jun 15 '12 at 12:49
-
1i wish i saw this before i wrote a plugin. SUch a waste of a few days or work. – Fallenreaper Feb 06 '13 at 17:30
-
2If you're looking for a solution to `datetime`, you're better off creating separate `date` and `time` inputs. – Meekohi Mar 27 '14 at 20:12
-
Don't forget about `month` type if you are looking for month selector. – Eugene Hoza Apr 14 '14 at 22:57
36
There is an iPhone native style date picker that runs in the browser - http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch/11
Patrick Dinnen
- 415
- 5
- 6
-
17In iOS5, you can use (see the answer by Kyle Gibbens), which will bring up the native date picker in Mobile Safari or in a webview. – Yoh Suzuki Jan 10 '12 at 01:37
11
I know it's an old post, but for future viewers: If you are using jQuery, you can try Mobiscroll, a customizable datepicker optimized for touch devices. It ships whith iOS and android skin as well.
istvan.halmen
- 3,320
- 1
- 23
- 29
-
@Tom, it does not require jQuery Mobile, requires jQuery, Zepto.js or App Framework – istvan.halmen Dec 20 '13 at 09:23
-
-
-
1@azerafati At the time of the answer it was. Here's the link to the last free version https://github.com/acidb/mobiscroll/tree/v2.17.3 – istvan.halmen May 29 '20 at 06:24
1
Although the need to register might be a dislike, Mobiscroll looks worth evaluating if you want to provide a consistent fallback for older ios (pre 5.x) and android (pre 4.x) devices - and probably some other platforms, as it promises to support jQMobi (now Intel appframework) and Zepto.
Philzen
- 3,945
- 30
- 46
1
There is an iPhone style date picker for HTML5 at Next-Point. Maybe you can change it to meet your needs.
user2451839
- 11
- 1
1
You can't. The date picker is a native control and is not available in Mobile Safari.
August
- 12,139
- 3
- 29
- 30
-
+1 as technically correct. You can't trigger the native date picker from the browser (which is a complete oversight on Apple's part, IMHO). The chosen answer is correct, as well, in that you can write JavaScript to emulate it. – DA. Apr 08 '11 at 21:20
-
1
-
type="datetime-local" works on iOS7 (they removed "datetime" for whatever reason) – Tom McKenzie Dec 20 '13 at 03:14
-
datetime-local does not support year for some twisted reason! only on iOS. If it is dec 31 and I'm planning something for next week? good luck for me :( – oriadam Sep 27 '18 at 14:07
0
Well, you could code your own if it was really important to you.
With enough work you could probably get it to look/feel a lot like Apple's native control.
Feels at a gut level like it would be a lot of work for limited payoff.
Genericrich
- 4,611
- 5
- 36
- 55
0
<input type="date" />
above code WILL NOT working on mozilla.
firefox doesn't support input type date.
zigots007
- 99
- 5
-1
In ASP.Net you can use the TextBox with type="date".
<asp:TextBox type="date" runat="server" />
In a Html5 compatible browser you will have a date field. In a Html5 non-compatible browser you will have simple text field.
