<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日曆</title>
<!--引入jQuery類庫文件-->
<script language="javascript" type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<script language="javascript" type="text/javascript" src="./js/jquery.ui.datepicker-zh-CN.js"></script>
<!--引入Css樣式類庫文件-->
<link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css"/>
<style>
#startTime,#endTime{
/* background-color:red;*/
}
</style>
<script type="text/javascript">
var D_value=0; //定義一個變量，用於存儲時間差值
$(function(){
//設置日曆顯示的採用的地區 是中國
$.datepicker.setDefaults( $.datepicker.regional[ "zh-CN" ] );
$("#startTime").datepicker({
//altField:"#actualDate",
//altFormat:"DD, d MM, yy",
autoSize:false ,//自動調整大小的操作 改變的輸入框的大小
changeMonth:false,//如果爲true 彈出一個下拉的菜單
changeYear:false, //前邊有默認10年 當前年份的 後邊有默認10年組成的下拉菜單
dateFormat:"yy-mm-dd", //日期的格式 呈現在輸入的文本框中
defaultDate:+1, //缺省的日期 + - 相對於當前的日期 計算
showWeek: true, //顯示當前年的週數
firstDay:1, //當前年份開始的第一天
showOn:"button", //borth 既可以觸發按鈕 又可以觸發文本框 彈出 日曆 如果是button 只能觸發button事件
buttonImage: "images/calendar.gif", //設置按鈕的圖片
buttonImageOnly: true, //設置這按鈕只顯示圖片效果 不要有button的樣式
showAnim:"toggle", //彈出日曆的效果
prevText:"上一月",
nextText:"下一月",
yearRange:"c-5:c+5", //年份的前後取值範圍
minDate:0, //活動開始日期相對當前日期的最小值(其中0爲字符串 需要使用變量時一定要轉換格式String())
//maxDate:25,
/*
結束日期的最小值 必須大於等於 開始日期的最大值
*/
showButtonPanel:true,
closeText:"Cancel",
//gotoCurrent:true
onSelect:function(textDate,inst){
alert(textDate);
var dt2=new Date(textDate);
var dt1=new Date();
var numDate=dt2-dt1;
D_value=Math.round(numDate/1000/60/60/24)+1; //小bug需要加1
function reValue(D_value){
return String(D_value);
}
$("#endTime").datepicker({
autoSize:false ,//自動調整大小的操作 改變的輸入框的大小
changeMonth:false,//如果爲true 彈出一個下拉的菜單
changeYear:false, //前邊有默認10年 當前年份的 後邊有默認10年組成的下拉菜單
dateFormat:"yy-mm-dd", //日期的格式 呈現在輸入的文本框中
defaultDate:+1, //缺省的日期 + - 相對於當前的日期 計算
showWeek: true, //顯示當前年的週數
firstDay:1, //當前年份開始的第一天
showOn:"button", //borth 既可以觸發按鈕 又可以觸發文本框 彈出 日曆 如果是button 只能觸發button事件
buttonImage: "images/calendar.gif", //設置按鈕的圖片
buttonImageOnly: true, //設置這按鈕只顯示圖片效果 不要有button的樣式
showAnim:"toggle", //彈出日曆的效果
prevText:"上一月",
nextText:"下一月",
yearRange:"c-5:c+5", //年份的前後取值範圍
minDate:reValue(D_value), //活動開始日期相對當前日期的最小值
//maxDate:25,
/*
結束日期的最小值 必須大於等於 開始日期的最大值
*/
showButtonPanel:true,
closeText:"Cancel",
//gotoCurrent:true
onSelect:function(textDate,inst){
alert(reValue(D_value));
}
});
}
});
/*
$("#endTime").datepicker({
autoSize:false ,//自動調整大小的操作 改變的輸入框的大小
changeMonth:false,//如果爲true 彈出一個下拉的菜單
changeYear:false, //前邊有默認10年 當前年份的 後邊有默認10年組成的下拉菜單
dateFormat:"yy-mm-dd", //日期的格式 呈現在輸入的文本框中
defaultDate:+1, //缺省的日期 + - 相對於當前的日期 計算
showWeek: true, //顯示當前年的週數
firstDay:1, //當前年份開始的第一天
showOn:"button", //borth 既可以觸發按鈕 又可以觸發文本框 彈出 日曆 如果是button 只能觸發button事件
buttonImage: "images/calendar.gif", //設置按鈕的圖片
buttonImageOnly: true, //設置這按鈕只顯示圖片效果 不要有button的樣式
showAnim:"toggle", //彈出日曆的效果
prevText:"上一月",
nextText:"下一月",
yearRange:"c-5:c+5", //年份的前後取值範圍
minDate:reValue(D_value), //活動開始日期相對當前日期的最小值
//maxDate:25,
// 結束日期的最小值 必須大於等於 開始日期的最大值
showButtonPanel:true,
closeText:"Cancel",
//gotoCurrent:true
onSelect:function(textDate,inst){
alert(reValue(D_value));
}
});
*/
});
</script>
</head>
<body>
<div>演示日曆的效果</div>
<!-- <div id="datepicker"></div>-->
活動開始日期:<input type="text" id="startTime" />
活動的結束日期:<input type="text" id="endTime" />
</body>
</html>
由於第二個日曆框需要一開始初始化，而初始化需要第一個框的數值，所以我把第二個放入第一個之中，當第一個選定後才能選擇第二個。
做了一個判斷，結束日期不能小於開始日期
