Trying to figure out how to strip holidays from jquery datepicker

Question

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 );

       }

     });
 });

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

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

edited May 23 '17 at 12:21

Community

1
1

answered Jun 09 '15 at 13:51

Guruprasad J Rao

29,410
14
101
200

I updated my question with your answer I set my datepicker defaults right from the start, which works but as soon as I click on var selected and choose YES or NO the holiday variable function disappears and date picker reinitializes with my options. @Guruprasad Rao – Snowman Jun 09 '15 at 14:49
@Snowman. Can you create an exact replica of your problem in the fiddle so that I can understand how it's changing and where its changing!!! – Guruprasad J Rao Jun 10 '15 at 03:23

Trying to figure out how to strip holidays from jquery datepicker

extra info

Here is my application.js

1 Answers1