Trying to figure out how to strip holidays from jquery datepicker

147 views Asked by At

Question is I want to be able to strip certain dates(holidays) from my jquery datepicker. noWeekends works and so does my other custom variable to determine my new_day variable but, for some reason I cant get my holidays variable to work and to disable a user from clicking on an holiday dates. Any help would be greatly appreciated.

extra info

app using

rails 4 + jquery

Here is my application.js

$(document).ready(function(){

     var holidays = ["12-25-2015","2015-04-03", "2015-05-25", "2015-07-03", "2015-09-07", "2015-11-26", "2015-12-25", "2016-01-01"];
     function editDays(date) {
         for (var i = 0; i < holidays.length; i++) {
            if (new Date(holidays[i]).toString() == date.toString()) {
                return true;
            }
         }
           return false;
     }

     $.datepicker.setDefaults({ dateFormat: 'D, dd M yy', numberOfMonths: 3, showButtonPanel: true, beforeShowDay: editDays });


     $('#leave_start').datepicker();

     $('#leave_end').datepicker();

     $('#leave_start_half').datepicker();

     $('#leave_end_half').datepicker();

     $('#future').blur(function() {
        var selected = $('.future').val();
        var touched = $('#indirect_id').val();
        var new_day = $('.anv').val();
        if (selected == 'YES') {
           $('#leave_start').datepicker( "option", "minDate", new_day );
           $('#leave_start').datepicker( "option", "beforeShowDay", $.datepicker.noWeekends );
           $('#leave_end').datepicker( "option", "minDate", new_day );
           $('#leave_end').datepicker( "option", "beforeShowDay", $.datepicker.noWeekends );
           $('#leave_start_half').datepicker( "option", "minDate", new_day );
           $('#leave_start_half').datepicker( "option", "beforeShowDay", $.datepicker.noWeekends );
           $('#leave_end_half').datepicker( "option", "minDate", new_day );
           $('#leave_end_half').datepicker( "option", "beforeShowDay", $.datepicker.noWeekends );

        } else if (selected == 'NO') {
           $('#leave_start').datepicker( "option", "minDate", 0 );
           $('#leave_start').datepicker( "option", "beforeShowDay", $.datepicker.noWeekends );
           $('#leave_end').datepicker( "option", "minDate", 0 );
           $('#leave_end').datepicker( "option", "beforeShowDay", $.datepicker.noWeekends );
           $('#leave_start_half').datepicker( "option", "minDate", 0 );
           $('#leave_start_half').datepicker( "option", "beforeShowDay", $.datepicker.noWeekends );
           $('#leave_end_half').datepicker( "option", "minDate", 0 );
           $('#leave_end_half').datepicker( "option", "beforeShowDay", $.datepicker.noWeekends );

        }

     });
 });

I tried the answer that was given it worked but when the user selected 'YES' or 'NO' for my selected variable it took away holiday variable and re formatted datepicker back to this

      $('#leave_start').datepicker( "option", "minDate", new_day);                             
      $('#leave_start').datepicker( "option", "beforeShowDay", $.datepicker.noWeekends );

but when they leave the my selected variable this works but as soon as they select yes or no holiday variable disappears.

this is what I have now that works but only works if selected var is blank and not YES or NO

$(document).ready(function(){
    var holidays = ["12-25-2015","2015-04-03", "2015-05-25", "2015-07-03", "2015-09-07", "2015-11-26", "2015-12-25", "2016-01-01"];
     $.datepicker.setDefaults({ dateFormat: 'D, dd M yy', numberOfMonths: 3, showButtonPanel: true, beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ holidays.indexOf(string) == -1 ]
      }});

     $'#leave_start').datepicker();

     $('#leave_end').datepicker();

     $('#leave_start_half').datepicker();

     $('#leave_end_half').datepicker();

     $('#future').blur(function() {
         var selected = $('.future').val();
         var touched = $('#indirect_id').val();
         var new_day = $('.anv').val();

         if (selected == 'YES') {
            $('#leave_start').datepicker( "option", "minDate", new_day );
            $('#leave_start').datepicker( "option", "beforeShowDay", $.datepicker.noWeekends );
            $('#leave_end').datepicker( "option", "minDate", new_day );
            $('#leave_end').datepicker( "option", "beforeShowDay", $.datepicker.noWeekends );
            $('#leave_start_half').datepicker( "option", "minDate", new_day );
            $('#leave_start_half').datepicker( "option", "beforeShowDay", $.datepicker.noWeekends );
            $('#leave_end_half').datepicker( "option", "minDate", new_day );
            $('#leave_end_half').datepicker( "option", "beforeShowDay", $.datepicker.noWeekends );

       } else if (selected == 'NO') {
            $('#leave_start').datepicker( "option", "minDate", 0 );
            $('#leave_start').datepicker( "option", "beforeShowDay", $.datepicker.noWeekends );
            $('#leave_end').datepicker( "option", "minDate", 0 );
            $('#leave_end').datepicker( "option", "beforeShowDay", $.datepicker.noWeekends );
            $('#leave_start_half').datepicker( "option", "minDate", 0 );
            $('#leave_start_half').datepicker( "option", "beforeShowDay", $.datepicker.noWeekends );
            $('#leave_end_half').datepicker( "option", "minDate", 0 );
            $('#leave_end_half').datepicker( "option", "beforeShowDay", $.datepicker.noWeekends );

       }

     });
 });
1

There are 1 answers

2
Guruprasad J Rao On

A sample workaround for a single input date:

DEMO HERE

$('input').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ holidays.indexOf(string) == -1 ]
    }
});

SOURCE