input type date validation on Android

Question

I'm using jQuery Mobile 1.3.1 and want to have a form with a date picker. I looked into the docs and came up with this:

<input type="date" name="Anreise" id="Anreise" data-mini="true" />

This works on iOS though it converts the date from the local formatting to 2013-04-30.

On Android I found out that the form won't submit because the native date picker outputs 2013-4-30. On submit the datepicker pops up and it says that you should choose a value. But I can't change the value to 2013-04-30.

How is this correctly done? Does the datpicker on jQuery Mobile works across all browsers and devices?

Solution:

I used Mobiscroll:

<link rel="stylesheet" href="css/mobiscroll.core.css" />
<link rel="stylesheet" href="css/mobiscroll.ios.css" /> 
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/mobiscroll.core.js"></script>
<script src="js/mobiscroll.core-de.js"></script>
<script src="js/mobiscroll.datetime.js"></script>
<script src="js/mobiscroll.datetime-de.js"></script>
<script src="js/mobiscroll.ios.js"></script>
<script>
    $(function(){
        $("#Anreise").mobiscroll().date({
            lang: 'de',
            dateOrder: 'dd mm yy',
            dateFormat : "dd.mm.yy"
        });
    });
</script>

<input type="text" name="Anreise" id="Anreise" data-mini="true" />

Answer 1

Unfortunately HTML5 spec doesn't provide a way to define a date format, which is, to be honest a very bad decision on their side.

You can always use a 3rd party date picker's for jQuery Mobile.

Only 3 of them are wort mentioning, and every one can be configured to show certain date format and every one of them works on all devices. Thou I would recommend you Mobiscroll because it has skins that looks like native mobile/desktop datepickers.

Mobiscroll - http://jsfiddle.net/Gajotres/WDjfR/

$(document).on('pagebeforeshow', '#index', function(){       
    $('#demo').mobiscroll().date({
        invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },
        theme: 'android-ics',
        display: 'inline',
        mode: 'scroller',
        dateOrder: 'dd mm yy',
        dateFormat : "dd-mm-yy"
    });  
});

Mobipick - http://jsfiddle.net/Gajotres/zyVjE/

$(document).on('pagebeforeshow', '#index', function(){       
    $('#demo').mobipick({
        dateFormat: "MM-dd-yyyy"
    });
});

Datebox - http://jsfiddle.net/Gajotres/ktbcP/

<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true, "dateFormat": "mm/dd/YYYY"}'/>

If you want to find more about jQuery Mobile date pickers take a look at this article.