试图弄清楚如何从 jquery datepicker 中删除假期

Posted 2023-05-09

【中文标题】试图弄清楚如何从 jquery datepicker 中删除假期

【英文标题】：Trying to figure out how to strip holidays from jquery datepicker

【发布时间】：2015-08-24 09:02:51

【问题描述】：

问题是我希望能够从我的 jquery datepicker 中删除某些日期（假期）。 noWeekends 有效，我的其他自定义变量也可以确定我的 new_day 变量，但由于某种原因，我无法让我的假期变量工作并禁止用户点击假期日期。任何帮助将不胜感激。

额外信息

应用使用

导轨 4 + jQuery

这是我的 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 );

        

     );
 );

我尝试了给出的答案，但是当用户为我选择的变量选择“是”或“否”时，它带走了假期变量并将日期选择器重新格式化回此

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

但是当他们离开我选择的变量时，这有效，但是一旦他们选择是或否，假期变量就会消失。

这就是我现在所拥有的，但只有在选择的 var 为空白且不是 YES 或 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】：

单个输入日期的示例解决方法：

DEMO HERE

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

SOURCE

【讨论】：

我用你的答案更新了我的问题我从一开始就设置了我的日期选择器默认值，这有效，但只要我点击 var selected 并选择是或否，假期变量函数就会消失并且日期选择器会重新初始化与我的选择。 @Guruprasad Rao

@Snowman。你能在小提琴中创建一个你的问题的精确副本，以便我了解它是如何变化的以及它在哪里变化！！！