jQuery UI Datepicker可以禁用星期六和星期天(和假日)吗?

我使用dateselect器来select预约date。 我已经将date范围设置为仅在下个月。 这工作正常。 我想从可用选项中排除周六和周日。 可以这样做吗? 如果是这样,怎么样?

还有beforeShowDay选项,它为每个date调用一个函数,如果允许date则返回true,否则返回false。 从文档:


beforeShowDay

该函数将一个date作为参数,并且必须返回一个[0]等于true / false的数组,指示这个date是否可选, 1等于一个CSS类名或s'作为默认演示文稿。 它被显示之前在dateselect器中每天都会被调用。

在dateselect器中显示一些国家节日。

 $(".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的函数,它可以防止select周末日子。

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

结合这两者,你可以做一些像(假设从上面的nationalDaysfunction):

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

更新 :请注意,从jQuery UI 1.8.19开始, beforeShowDay选项还接受可选的第三个参数,popup式工具提示

如果你不想周末出现,简单地说:

CSS

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

这些答案非常有帮助。 谢谢。

我在下面的贡献添加了一个数组,其中多个date可以返回false(我们每周二,周三和周四closures)。 而且我捆绑了具体的date加上几年和非周末的function。

如果您想要周末rest,请将[星期六],[星期天]添加到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]; } }); 

datepicker内置了这个function!

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

http://api.jqueryui.com/datepicker/#utility-noWeekends

这里的每个人都喜欢的解决scheme似乎非常激烈…我个人认为这样做更容易:

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

这样你的date是人类可读的。 这不是真的那么不同,这样对我来说更有意义。

这个版本的代码将使你从sql数据库中获取假期date,并在UI Datepicker中禁用指定的date

 $(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中创build一个数据库,并把你的假期date的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] 

快乐的编码! 🙂

 $("#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]; } 

您可以使用noWeekendsfunction禁用周末select

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

在此版本中,月份,date年份决定日历上要阻止的date。

 $(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, }); }); }); 

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

在最新的Bootstrap 3版本(bootstrap- beforeShowDay )中, beforeShowDay需要以下格式的结果:

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

或者,如果您不关心CSS和工具提示,那么只需返回一个布尔值false以使date不可select。

另外,没有$.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 });