您的位置：首页 > Web前端 > JQuery

jQuery日历(判断开始结束日期)

2012-03-29 19:48 357 查看 
<!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>


由于第二个日历框需要一开始初始化，而初始化需要第一个框的数值，所以我把第二个放入第一个之中，当第一个选定后才能选择第二个。



做了一个判断，结束日期不能小于开始日期
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航