jqueryjquery-uidatepickerformatbuttonbar

jquery datepicker conditionally disable Today on button bar


I have a jquery datepicker where only certain dates are sectable in the calendar. The functionality of the today button on the button bar has been overridden to populate today's date in the field. Now I am trying to disable the today button on the button bar if today is not a valid date for the user to choose. I am trying to do this by changing the ui-datepicker-current class to contain ui-state-disabled rather than ui-state-default. I cannot seem to change the classes though. I have tried adding logic to beforeShow:

$(document).ready( function() {
  $( ".MyForm-date" ).datepicker( {
    changeYear: true,
    dateFormat: "dd M yy",
    yearRange: "-20:+10",
    showButtonPanel: true,
    beforeShow : function( input, instance ) { 
        instance.dpDiv.find(".ui-datepicker-current").removeClass("ui-state-default").addClass("ui-state-disabled");
        return initGoodReportDates( input, instance ); },
    onChangeMonthYear : function( year, month, instance ) { return  refreshGoodReportDates(year, month, instance); },
    beforeShowDay : function( date ) { return isGoodReportDate( date ); },
    onClose : function(){ checkDate( this ); }
  });

as well as adding logic below this block:

$(document).ready( function() {
  $( ".MyForm-date" ).datepicker( {
    changeYear: true,
    dateFormat: "dd M yy",
    yearRange: "-20:+10",
    showButtonPanel: true,
    beforeShow : function( input, instance ) { 
        return initGoodReportDates( input, instance ); },
    onChangeMonthYear : function( year, month, instance ) { return refreshGoodReportDates(year, month, instance); },
    beforeShowDay : function( date ) { return isGoodReportDate( date ); },
    onClose : function(){ checkDate( this ); }
  });

$(".MyForm-date").datepicker("widget").find("ui-datepicker-current").removeClass("ui-state-default").addClass("ui-state-disabled");

however neither have changed the classes associated with button for ui-datepicker-current. Can anyone please tell me how I can access that button?

Thank you


Solution

  • Use a timeout to modify button just after beforeShow is executed:

        $('.foo').datepicker({
            beforeShow: function(input, inst) {
                setTimeout(function() { 
                  //...
                }, 0);   
            }
        })
    

    See example here

    You also have to handle onChangeMonthYear event.