突出顯示，禁用特定的日子在jQuery UI的日期選擇器

Question

在這裏，我想達到以下

1. 高亮顯示日期選擇器
2. 禁用特定日子的所有假期日期日期選擇器
3. 禁用特定的週末-picker

我有每個片段分別，但我想一起

小提琴：Working Demo

亮點假期

var holydays = ['10/17/2013', '10/18/2013', '11/2/2013']; 

function highlightDays(date) { 
    for (var i = 0; i < holydays.length; i++) { 
     if (new Date(holydays[i]).toString() == date.toString()) { 
      return [true, 'highlight']; 
     } 
    } 
    return [true, '']; 

} 

$(function() { 
    $("#dp").datepicker({ 
     minDate: 0, 
     dateFormat: 'mm/dd/yy', 
     inline: true, 
     numberOfMonths: [1, 2], 
     dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 
     beforeShowDay: highlightDays, 
    }); 
}); 

禁用特定的日子

var disabledDays = ["10-20-2013", "10-21-2013", "11-15-2013", "11-17-2013"]; 
    function disableAllTheseDays(date) { 
     var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); 
     for (i = 0; i < disabledDays.length; i++) { 
      if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) { 
       return [false]; 
      } 
     } 
     return [true]; 
    } 

禁用週末

$(function() { 
     $("#availability").datepicker({ 
      minDate: 0, 
      dateFormat: 'mm/dd/yy', 
      inline: true, 
      numberOfMonths: [1, 2], 
      dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 
      beforeShowDay: $.datepicker.noWeekends 
     }); 
    }); 

任何人都可以幫助我..

在此先感謝。

Answer 1

變化：

$(function() { 
    $("#dp").datepicker({ 
     minDate: 0, 
     dateFormat: 'mm/dd/yy', 
     inline: true, 
     numberOfMonths: [1, 2], 
     dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 
     beforeShowDay: setCustomDate // <-----change function 
    }); 
}); 

附加功能：

function setCustomDate(date) { 
    var clazz = ""; 
    var arr1 = highlightDays(date); 
    if (arr1[1] != "") clazz = arr1[1]; 

    var arr2 = disableAllTheseDays(date); 
    var arr3 = $.datepicker.noWeekends(date); 

    return [(!arr2[0] || !arr3[0]) ? false : true, clazz]; 
} 

Answer 2

我們現在是在2014年，並且需要最少的代碼。 這是我禁用天的方法。

我的變量的具體'，0 < =特定< = 7

in my demo : 

1 = sunday 2 = saturday 4 = Monday to friday

if specific == 5 that mean 4 + 1 so i allow Monday till friday + sunday. 

7指的是允許拾取所有天。 通知，我只允許挑選現在開始月+ 1

$("#datepicker").datepicker({ 
    minDate:0, 
    maxDate: '+1M-1D', 
    dateFormat: "yy-mm-dd", 
    beforeShowDay: function(date) { 
     var day = date.getDay(); 
     if(day == 6) 
      return [(specific & 2) > 0, '']; 
     else if(day == 0) 
      return [(specific & 1) > 0, '']; 
     else 
      return [(specific & 4) > 0, '']; 
    } 
}); 

Answer 3

只是以備將來參考。由於我一直在尋找同樣的東西，發現這些相同的功能在很多不同的地方禁用天：

http://www.spiceforms.com/blog/how-to-disable-dates-in-jquery-datepicker-a-short-guide/ https://davidwalsh.name/jquery-datepicker-disable-days

var disabledDays = ["10-20-2013", "10-21-2013", "11-15-2013", "11-17-2013"]; 

function disableAllTheseDays(date) { 
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); 
    for (i = 0; i < disabledDays.length; i++) { 
     if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) { 
      return [false]; 
     } 
    } 
    return [true]; 
} 

但由於您使用的inArray，該對不需要，導致更簡單和更高效的功能：

var disabledDays = ["4-2-2016", "4-4-2016"]; 

function disableAllTheseDays(date) { 
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); 
    if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) return [false]; 
    return [true]; 
}