Question

I’m working on a mobile version of my web application, but I have some trouble with configuring a datepicker in jQ mobile. I know it’s an experimental feature (I suppose it might be a bit buggy?), but I figured configuring it shouldn’t really be a problem.

However, I can’t seem to get it working. I looked at the jQ UI documentation to come up with the following configuration for my datepicker:

    $(document).ready(function(){
         $("#mo_date").datepicker({ 
                                    showAnim: 'fadeIn', 
                                    dateFormat: 'dd-mm-yy',
                                    dayNamesShort: ['Zon', 'Maa', 'Din', 'Woe', 'Don', 'Vrij', 'Zat'],
                                    dayNamesMin:  ['Zon', 'Maa', 'Din', 'Woe', 'Don', 'Vrij', 'Zat'],
                                    dayNames: ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'],
                                    monthNames: ['Januari','Februari','Maart','April','Mei','Juni','Juli','Augustus','September','Oktober','November','December'],
                                    monthNamesShort: ['Jan','Feb','Maa','Apr','Mei','Jun','Jul','Aug','Sep','Okt','Nov','Dec'],
                                    minDate: 0,
                                    // altField outputs date in mySQL date format yy-m-d. datum hieruit halen, ipv .datepicker('getDate');
                                //  altField: '.output_date',
                                //  altFormat: 'yy-m-d'
                                });
    });

My HTML is as follows:

<form action="mobile/go" method="post"> 
        <div data-role="fieldcontain">
            <label for="mo_event_type" class="select">Kies type taak</label>
            <select name="mo_event_type" id="mo_event_type" data-native-menu="false">
                <option data-placeholder="true">Taaktype</option>
                <option value="huiswerk">Huiswerk</option>
                <option value="deadline">Deadline</option>
                <option value="vrijetijd">Vrije tijd</option>
            </select>
        </div>
        <div data-role="fieldcontain">
            <label for="mo_title">Titel</label>
            <input type="text" name="mo_title" value="" id="mo_title" data-theme="b"/>
        </div>
        <div data-role="fieldcontain">
            <label for="mo_descr">Beschrijving</label>
            <textarea cols="20" rows="8" name="mo_descr" id="mo_descr" data-theme="b"></textarea>
        </div>
        <div date-role="fieldcontain">
            <label for="mo_date">Datum</label>
            <input type="date" name="mo_date" id="mo_date" value="" />
        </div>
    </form>

Am I missing something crucial here or am I just doing it plain wrong? Some insight would be appreciated. I know the configuration is fine since I’m using the same for my non-mobile application. Just can’t get it to work with the mobile one 🙁

Thanks a lot.

Answer 1

First I like the DateBox plugin a little better IMO: http://dev.jtsage.com/jQM-DateBox/

In the Documentation for the Experimental DP: http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/

<script>
  //reset type=date inputs to text
  $( document ).bind( "mobileinit", function(){
    $.mobile.page.prototype.options.degradeInputs.date = true;
  });   
</script>

Be sure to place this event binding in a script that loads after jQuery, but before jQuery Mobile. Check this page’s source for an example.

I have also noticed that many can not get additional options to work with the DP

I had this for the DateBox:

<input type="date" 
       name="mo_date" 
       id="mo_date" value="" 
       data-options='{
           "dateFormat": "DD-MM-YYYY", 
           "noButtonFocusMode": "true", 
           "headerFormat": "DD-MM-YYYY", 
           "daysOfWeekShort" : [
                                   "Zon", 
                                   "Maa", 
                                   "Din", 
                                   "Woe", 
                                   "Don", 
                                   "Vrij", 
                                   "Zat"
                               ], 
           "mode": "calbox", 
           "minYear" : "0", 
           "monthsOfYear" : [
                                "Januari",
                                "Februari",
                                "Maart",
                                "April",
                                "Mei",
                                "Juni",
                                "Juli",
                                "Augustus",
                                "September",
                                "Oktober",
                                "November",
                                "December"
                            ] 
       }'  
       data-role="datebox" />

single line version:

<input type="date" name="mo_date" id="mo_date" value="" data-options='{"dateFormat": "DD-MM-YYYY", "noButtonFocusMode": "true", "headerFormat": "DD-MM-YYYY", "daysOfWeekShort" : ["Zon", "Maa", "Din", "Woe", "Don", "Vrij", "Zat"], "mode": "calbox", "minYear" : "0", "monthsOfYear" : ["Januari","Februari","Maart","April","Mei","Juni","Juli","Augustus","September","Oktober","November","December"] }'  data-role="datebox" />