1. 首頁
  2. 問答
  3. jQuery UI Datepicker可以禁用星期六和星期日（和假日）嗎？

jQuery UI Datepicker可以禁用星期六和星期日（和假日）嗎？

2009-02-02 315 views

回答

229

還有就是beforeShowDay選項，這需要一個被稱爲每個日期的功能，如果日期是允許還是假的，如果它是不返回true。從該文檔：

beforeShowDay

該函數採用一個日期作爲參數，並必須返回[0]等於真/假一個數組，指示該日期是否是可選擇的，並且1等於默認演示文稿的CSS類名稱或''。它被顯示之前在日期選擇器中每天都會被調用。

顯示的日期選擇某些國家法定節假日。

$(".selector").datepicker({ beforeShowDay: nationalDays}) 

natDays = [ 
    [1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'], 
    [4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'], 
    [7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'], 
    [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke'] 
]; 

function nationalDays(date) { 
    for (i = 0; i < natDays.length; i++) { 
     if (date.getMonth() == natDays[i][0] - 1 
      && date.getDate() == natDays[i][1]) { 
     return [false, natDays[i][2] + '_day']; 
     } 
    } 
    return [true, '']; 
}

一個內置函數存在，稱爲noWeekends，可以防止選擇週末天。

$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends })

（從上面的假設nationalDays功能），將兩者結合起來，你可以這樣做：

$(".selector").datepicker({ beforeShowDay: noWeekendsOrHolidays}) 

function noWeekendsOrHolidays(date) { 
    var noWeekend = $.datepicker.noWeekends(date); 
    if (noWeekend[0]) { 
     return nationalDays(date); 
    } else { 
     return noWeekend; 
    } 
}

更新：注意，jQuery UI的19年1月8日的， beforeShowDay option也接受可選的第三參數，彈出工具提示

來源

2009-02-02 12:48:14

+2

感謝這個，找不到任何地方中的文檔此方法。 – 2010-04-13 14:55:26

+2

優秀的解決方案。特別是你的解釋簡潔得多。 @Neil：http://dev.jqueryui.com/ticket/5851 – 2010-10-28 11:36:13

+0

這個解決方案保存了我的皮膚。感謝這個精彩的解決方案！ – racl101 2011-08-12 21:16:37

37

如果你不想週末出現，si mply：

CSS

th.ui-datepicker-week-end, 
td.ui-datepicker-week-end { 
    display: none; 
}

來源

2009-02-19 06:45:05

2

在這個版本中，月，日，和年決定在日曆上阻止這天。

$(document).ready(function(){ 
    var d   = new Date(); 
    var natDays = [[1,1,2009],[1,1,2010],[12,31,2010],[1,19,2009]]; 

    function nationalDays(date) { 
    var m = date.getMonth(); 
    var d = date.getDate(); 
    var y = date.getFullYear(); 

    for (i = 0; i < natDays.length; i++) { 
     if ((m == natDays[i][0] - 1) && (d == natDays[i][1]) && (y == natDays[i][2])) 
     { 
     return [false]; 
     } 
    } 
    return [true]; 
    } 
    function noWeekendsOrHolidays(date) { 
    var noWeekend = $.datepicker.noWeekends(date); 
     if (noWeekend[0]) { 
     return nationalDays(date); 
     } else { 
     return noWeekend; 
    } 
    } 
    $(function() { 
    $(".datepicker").datepicker({ 

     minDate: new Date(d.getFullYear(), 1 - 1, 1), 
     maxDate: new Date(d.getFullYear()+1, 11, 31), 

     hideIfNoPrevNext: true, 
     beforeShowDay: noWeekendsOrHolidays, 
    }); 
    }); 
});

來源

2009-10-15 13:44:51

6

這個版本的代碼，就是讓從SQL數據庫中獲取的節日日期，並在UI的DatePicker


$(document).ready(function(){ 
    var holiDays = (function() { 
    var val = null; 
    $.ajax({ 
     'async': false, 
     'global': false, 
     'url': 'getdate.php', 
     'success': function (data) { 
      val = data; 
     } 
    }); 
    return val; 
    })(); 
    var natDays = holiDays.split(''); 

    function nationalDays(date) { 
    var m = date.getMonth(); 
    var d = date.getDate(); 
    var y = date.getFullYear(); 

    for (var i = 0; i ‘ natDays.length-1; i++) { 
    var myDate = new Date(natDays[i]); 
     if ((m == (myDate.getMonth())) && (d == (myDate.getDate())) && (y == (myDate.getFullYear()))) 
     { 
     return [false]; 
     } 
    } 
    return [true]; 
    } 

    function noWeekendsOrHolidays(date) { 
    var noWeekend = $.datepicker.noWeekends(date); 
     if (noWeekend[0]) { 
     return nationalDays(date); 
     } else { 
     return noWeekend; 
    } 
    } 
    $(function() { 
    $("#shipdate").datepicker({ 
     minDate: 0, 
     dateFormat: 'DD, d MM, yy', 
     beforeShowDay: noWeekendsOrHolidays, 
     showOn: 'button', 
     buttonImage: 'images/calendar.gif', 
     buttonImageOnly: true 
    }); 
    }); 
});

創建SQL數據庫禁用指定的日期，並把您的度假日期在MM/DD/YYYY格式爲VARCHAR 把下面的內容在文件中getdate.php


[php] 
$sql="SELECT dates FROM holidaydates"; 
$result = mysql_query($sql); 
$chkdate = $_POST['chkdate']; 
$str=''; 
while($row = mysql_fetch_array($result)) 
{ 
$str .=$row[0].''; 
} 
echo $str; 
[/php]

編碼愉快!!!! :-)

來源

2010-02-25 13:25:53 neo

25

這些答案是非常有益的。謝謝。

我在下面的貢獻添加了一個數組，其中多個日期可以返回false（我們在每週二，週三和週四關閉）。而且我捆綁了特定的日期加上幾年和非週末的功能。

如果您想要週末休息，請將[星期六]，[星期天]添加到closedDays數組中。

$(document).ready(function(){ 

    $("#datepicker").datepicker({ 
     beforeShowDay: nonWorkingDates, 
     numberOfMonths: 1, 
     minDate: '05/01/09', 
     maxDate: '+2M', 
     firstDay: 1 
    }); 

    function nonWorkingDates(date){ 
     var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6; 
     var closedDates = [[7, 29, 2009], [8, 25, 2010]]; 
     var closedDays = [[Monday], [Tuesday]]; 
     for (var i = 0; i < closedDays.length; i++) { 
      if (day == closedDays[i][0]) { 
       return [false]; 
      } 

     } 

     for (i = 0; i < closedDates.length; i++) { 
      if (date.getMonth() == closedDates[i][0] - 1 && 
      date.getDate() == closedDates[i][1] && 
      date.getFullYear() == closedDates[i][2]) { 
       return [false]; 
      } 
     } 

     return [true]; 
    } 




});

來源

2010-07-28 15:23:08 orolo

4 
$("#selector").datepicker({ beforeShowDay: highlightDays }); 

... 

var dates = [new Date("1/1/2011"), new Date("1/2/2011")]; 

function highlightDays(date) { 

    for (var i = 0; i < dates.length; i++) { 
     if (date - dates[i] == 0) { 
      return [true,'', 'TOOLTIP']; 
     } 
    } 
    return [false]; 

}

來源

2011-01-07 14:44:17

9

在這裏，每個人都喜歡的解決方案似乎非常激烈......我個人認爲這是很容易做這樣的事情：

 var holidays = ["12/24/2012", "12/25/2012", "1/1/2013", 
      "5/27/2013", "7/4/2013", "9/2/2013", "11/28/2013", 
      "11/29/2013", "12/24/2013", "12/25/2013"]; 

     $("#requestShipDate").datepicker({ 
      beforeShowDay: function(date){ 
       show = true; 
       if(date.getDay() == 0 || date.getDay() == 6){show = false;}//No Weekends 
       for (var i = 0; i < holidays.length; i++) { 
        if (new Date(holidays[i]).toString() == date.toString()) {show = false;}//No Holidays 
       } 
       var display = [show,'',(show)?'':'No Weekends or Holidays'];//With Fancy hover tooltip! 
       return display; 
      } 
     });

這樣，你的日期是人類可讀。這不是真的那麼不同，這樣對我來說更有意義。

來源

2012-11-30 21:27:40 Cleanshooter

4

您可以使用noWeekends功能要禁用週末選擇

$(function() { 
    $("#datepicker").datepicker({ 
    beforeShowDay: $.datepicker.noWeekends 
    }); 
    });

來源

2015-10-31 19:53:32

0

禁用日子裏，你可以做這樣的事情。 <input type="text" class="form-control datepicker" data-disabled-days="1,3">其中1是週一和3是星期三

來源

2017-02-08 14:50:40

0

在最新的引導3版（自舉datepicker.js）beforeShowDay預計這種格式的結果：

{ enabled: false, classes: "class-name", tooltip: "Holiday!" }

或者，如果你不在乎關於CSS和工具提示，然後簡單地返回布爾值false以使日期不可選。

而且，沒有$.datepicker.noWeekends，所以你需要做沿着此線的東西：

var HOLIDAYS = { // Ontario, Canada holidays 
    2017: { 
     1: { 1: "New Year's Day"}, 
     2: { 20: "Family Day" }, 
     4: { 17: "Easter Monday" }, 
     5: { 22: "Victoria Day" }, 
     7: { 1: "Canada Day" }, 
     8: { 7: "Civic Holiday" }, 
     9: { 4: "Labour Day" }, 
     10: { 9: "Thanksgiving" }, 
     12: { 25: "Christmas", 26: "Boxing Day"} 
    } 
}; 

function filterNonWorkingDays(date) { 
    // Is it a weekend? 
    if ([ 0, 6 ].indexOf(date.getDay()) >= 0) 
     return { enabled: false, classes: "weekend" }; 
    // Is it a holiday? 
    var h = HOLIDAYS; 
    $.each(
     [ date.getYear() + 1900, date.getMonth() + 1, date.getDate() ], 
     function (i, x) { 
      h = h[x]; 
      if (typeof h === "undefined") 
       return false; 
     } 
    ); 
    if (h) 
     return { enabled: false, classes: "holiday", tooltip: h }; 
    // It's a regular work day. 
    return { enabled: true }; 
} 

$("#datePicker").datepicker({ beforeShowDay: filterNonWorkingDays });

來源

2017-04-03 21:31:59

相關問題

 相關問題