Date Picker for iPhone Web Application

DatepickerIphone

Datepicker Problem Overview


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:

iOS Date Picker

Datepicker Solutions


Solution 1 - Datepicker

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" />

Solution 2 - Datepicker

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

Solution 3 - Datepicker

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.

Solution 4 - Datepicker

You can't. The date picker is a native control and is not available in Mobile Safari.

Solution 5 - Datepicker

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.

Solution 6 - Datepicker

There is an iPhone style date picker for HTML5 at [Next-Point][1]. Maybe you can change it to meet your needs.

[1]: http://www.next-point.ro/Transport/App/Adauga "Next-Point"

Solution 7 - Datepicker

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.

Solution 8 - Datepicker

<input type="date" />

above code WILL NOT working on mozilla.

firefox doesn't support input type date.

Solution 9 - Datepicker

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRamesh SoniView Question on Stackoverflow
Solution 1 - DatepickerKyleView Answer on Stackoverflow
Solution 2 - DatepickerPatrick DinnenView Answer on Stackoverflow
Solution 3 - Datepickeristvan.halmenView Answer on Stackoverflow
Solution 4 - DatepickerAugustView Answer on Stackoverflow
Solution 5 - DatepickerPhilzenView Answer on Stackoverflow
Solution 6 - Datepickeruser2451839View Answer on Stackoverflow
Solution 7 - DatepickerGenericrichView Answer on Stackoverflow
Solution 8 - Datepickerzigots007View Answer on Stackoverflow
Solution 9 - DatepickerChristian BUISSONView Answer on Stackoverflow