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, ''];
}
});
}
});