Jquery UI的日历控件datepicker限制日期

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

JQuery.ui.Datepicker是一个很强大的日期选择控件，定制性很强。朱最近在做一个旅馆预订的小功能，要求用户在填写订单选择入住日期时，要将已经被预订出的日期置为不可用，查些资料，看看JS，原来可以使用beforeshowday来控制每一天的格式。主要代码如下：

 

1. var orderDays = [[4,30,2010],[5,1,2010],[5,14,2010]];  
2. function setOrdereDays(date) {  
3.     var isOrdered = false;  
4.     var scheduleStatus = "";  
5.     for (i = 0; i < orderDays.length; i++) {  
6.       if (date.getMonth() == orderDays[i][0] - 1 && 
         date.getDate() == orderDays[i][1] && date.getFullYear() == orderDays[i][2])  
7.       {  
8.         isOrdered = true;break;  
9.       }  
10.     }  
11.     if(isOrdered){  
12.         return [false, 'CLOSED'];  
13.     }else{  
14.         return [true, ''];  
15.     }  
16. }  

“CLOSED”貌似是Datepicker内置的一个什么值，设置为"CLOSED"则当天的日期是不可选的。

ui.Datepicker.js里关于beforeShowDay的一些注释：

beforeShowDay: null, // Function that takes a date and returns an array with
// [0] = true if selectable, false if not, [1] = custom CSS class name(s) or '',
// [2] = cell title (optional), e.g. $.datepicker.noWeekends

A function that takes a date as a parameter and must return an array with:

• [0]: true/false indicating whether or not this date is selectable
• [1]: a CSS class name to add to the date's cell or "" for the default presentation
• [2]: an optional popup tooltip for this date

第三个参数可以在该日期上显示title，提示节假日名称。（比如国庆）

return [false, 'customCss','国庆'];  

[plain]  view plain