您的位置:首页 > 其它

在限制了可选日期范围的calendar中,使几个日期不可选的方法

2013-01-06 16:52 911 查看
1. 加入calendar的准备工作

我们使用了datepicker来加入calendar,要想使用datepicker,就需要引用jquery包,我们引用了jquery-1.5.1.min.js和jquery-ui.min.js,并引用jquery-ui.css加入样式。

2. html

<input type="text" readonly="readonly" id="datepicker"/>

3. 本地化

默认的jquery中只有英文, 没有中文,要本地话,需要引入新的文件jquery.ui.datepicker-zh-CN.js

4. jquery, 加入calendar,并设置可选范围为从当前日期开始的7天内(带有中英文)

$(document).ready(function() {
setDatePicker('datepicker','datepicker');

  function setDatePicker(triggerId,altField){
var lang = "${currentLanguage eq 'zh' ? 'zh-CN' : ''}";
$.datepicker.setDefaults($.datepicker.regional[lang]);
$("#" + triggerId).datepicker({
altField:"#" + triggerId,
altFormat:"yy-mm-dd",
changeMonth:true,
changeYear:false,
  closeText: "X",
  minDate: 0,
maxDate:+6,
navigationAsDateFormat: true,
selectOtherMonths: false,
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: false ,
buttonText: ""
});
}  
});

5. 使2013/1/1, 2013/1/2不可选,加入beforeShowDay,使每个日期在显示前都执行这个方法过滤,返回[false, 'CLOSED']为不可用

$(document).ready(function() {
setDatePicker('datepicker','datepicker');

   function setDatePicker(triggerId,altField){
var lang = "${currentLanguage eq 'zh' ? 'zh-CN' : ''}";
$.datepicker.setDefaults($.datepicker.regional[lang]);
$("#" + triggerId).datepicker({
altField:"#" + triggerId,
altFormat:"yy-mm-dd",
changeMonth:true,
changeYear:false,
  closeText: "X",
minDate: 0,
maxDate:+6,
navigationAsDateFormat: true,
selectOtherMonths: false,
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: false ,
  buttonText: "",
beforeShowDay: function(date) {
  var days = [[1,1,2013],[1,2,2013]];
  for(i=0; i<days.length; i++){

  if(date.getDate()==days[i][1] &&
date.getMonth()==days[i][0]-1 &&
date.getFullYear()==days[i][2]){
  return [false, 'CLOSED'];
  }
  }
  return [true, ''];
  }
});
}  
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐