Question

I’m not sure if this is a bug or what, but I’m getting a very strange behavior with jQuery mobile’s datepicker.

When clicking a disabled date, the enabled dates disappear! WTF?

Please check out my jsFiddle for a very simple example: http://jsfiddle.net/X5qp8/

I’m modeling this after jquery’s recommendation for the mobile hack: http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/

I’m also rendering it to a div because I need a persistent calendar. Maybe these things just do not jibe…

I’ve also found that the bug lies in line 33 of their mobile extension, but it is unclear what they are attempting to do there:

$( ".ui-datepicker-calendar .ui-btn", dp ).each(function(){
            var el = $(this);
            // remove extra button markup - necessary for date value to be interpreted correctly
            el.html( el.find( ".ui-btn-text" ).text() ); 
        });

Answer 1

Line 33 is stripping the extra markup so that the datepicker plugin can parse the date for the plugins various events. I have recently found a solution that worked for me, but I am unable to get things working on your jsFiddle. I have commented out some of the extra markup that was being done for mobile styling. Take a look at my version of the updateDatepicker function and hopefully it will be helpful.

function updateDatepicker(){

     // $( ".ui-datepicker-header", dp ).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all");
     $( ".ui-datepicker-prev, .ui-datepicker-next", dp ).attr("href", "#");
     $( ".ui-datepicker-prev", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-l", shadow: true, corners: true});
     $( ".ui-datepicker-next", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true});
     // $( ".ui-datepicker-calendar th", dp ).addClass("ui-bar-c");
     // $( ".ui-datepicker-calendar td", dp ).addClass("ui-body-c");
     // $( ".ui-datepicker-calendar a", dp ).buttonMarkup({corners: false, shadow: false}); 
     $( ".ui-datepicker-calendar a.ui-state-active", dp ).addClass("ui-btn-active"); // selected date
     $( ".ui-datepicker-calendar a.ui-state-highlight", dp ).addClass("ui-btn-up-e"); // today"s date
     $( ".ui-datepicker-calendar .ui-btn", dp ).each(function(){
          var el = $(this);
          // remove extra button markup - necessary for date value to be interpreted correctly
         el.html( el.find( ".ui-btn-text" ).text() );
     });
};