Two date fields in a form using jquery mobile for mobile web application

Question

I want to add two date fields in a form in mobile web application. Based on the date selected on first calendar, the minimum date range in second calendar is set. I am using jquery mobile but it does not provides a direct way to create a date field. I found two options to create it : Datepicker by jquery UI Datebox by http://dev.jtsage.com/ Which one will be better which will help me to set the date range, change the css of the calendar easily?

Answer 1

First don't use jQuery Mobile data picker for jQuery Mobile, it lacks responsiveness jQuery Mobile needs.

Thankfully there are some 3rd party solutions made exclusively for jQuery Mobile.

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.

Mobiscroll is best of them, unfortunately it is also a commercial application, or if you want to can use version from my jsFiddle example, at that point Mobiscroll was still free. It provides native like and feel skins.