Mobiscroll - Change the default date-format in the output date shown in the text box

Theses days I'm trying out HTML5 to develop mobile applications. I find HTML5 rather useful compared to native coding in iPhone and Android. If not for HTML5, I will need to develop two separate applications for 2 platforms. HTML5 makes my life easier.

I am using mobiscroll plugin 2.3. In the date picker, what ever I do, I was not able to get the output date in the format I need. Always I am getting:

 After trying out different options and after going through various forums, I managed to find how to handle it.

  $("#toDate").mobiscroll().datetime({
                    preset: 'date',

                    dateFormat: 'dd/mm/yyy'',
                    dateOrder: 'ddmmy',
                    onSelect: function() {
                        $(this).val($.scroller.formatDate('dd-mm-yy HH:ii A', $(this).scroller('getDate')));
                    },
                    parseValue: function(val) {
                        var d = new Date(),
                            result = [];
                        try {
                            d = $.scroller.parseDate('dd-mm-yy HH:ii A', val);
                        }
                        catch (e) {
                        }
                        // Set wheels
                        result[0] = d.getDate();
                        result[1] = d.getMonth();
                        result[2] = d.getFullYear();
                       
                        return result;
                    }
     });

So the output will be something like

If you need a format like 'Thursday 31 Aug 2013', then try "DD d M yy".


However, if you are using a previous version, try the solution at:
https://groups.google.com/forum/#!topic/mobiscroll/XbvCMpD1Zds

For date formats refer:
http://docs.mobiscroll.com/datetime

My html part is:

<li data-role="fieldcontain">
<label for="toDate">To:</label> <input type="datetime" id="toDate" /></li>