Jquery日历控件代码-白红宇

Jquery日历控件代码

阅读量：6360 次

发布时间：2019-06-23

本文共 11330 字，大约阅读时间需要 37 分钟。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Jquery日历控件代码_网页代码站(www.webdm.cn)</title>

//jquery等待页面加载完执行以下程序

$(document).ready(function(){

//点击“关闭”按钮关闭日历

$(".close").click(function(){

$(".datetime_pick").slideUp();

})

//点击时间输入框，弹出日历

$(".timepick").focus(function(){

var year=$(".year_select").val();

var month1=$(".month_select").val();

var data=new Date(year,month1,0);//取值并实例化时间对象，最后一个参数为0，能够取得某年某月一共有多少天

var sum_day=data.getDate();//取得某月一共的天数

var j=1;

var month="";

for(j=1;j<=sum_day;j++)

{ if(j<10) j="0"+j;//小于10的日期，前面加0

month+="<li year="+year+" day="+j+">"+j+"</li>";//通过for循环输入每月的日历，并赋值给month变量，day属性表示具体几号，year属性表示哪一年

}

$(".showday").html(month);//输出变量的值

//当鼠标移到每个日期上，输出这一天是星期几

$(".showday li").mouseover(function(){

var date=$(this).attr("day");

var data1=new Date(year,month1-1,date);//实例化Date对象

var xingqi=data1.getDay();//取得某一天是星期几

switch(xingqi){

case 0: var weekday="星期天";

break;

case 1: var weekday="星期一";

break;

case 2: var weekday="星期二";

break;

case 3: var weekday="星期三";

break;

case 4: var weekday="星期四";

break;

case 5: var weekday="星期五";

break;

case 6: var weekday="星期六";

break;

}

$(".show_xingqi").text("今天是"+weekday);

$(".show_xingqi").show();//输出

})

//鼠标移开，显示星期几的窗口消失

$(".showday").mouseout(function(){

$(".show_xingqi").hide();

})

//点击某一天后，弹出确认框，当点击“确定”时，更改小时，分，秒选择框时读取选择框的值并输出时间到提交框里

$(" .showday li").click(function(){

var day=$(this).attr("day");

var real_time=year+"-"+month1+"-"+day;

var msg=confirm("要选择时间吗？");

if(msg){

$(".hour_select,.minute_select,.second_select").change(function(){

//取得时，分，秒下拉框的值，到变量里

var month1=$(".month_select").val();

var minute=$(".minute_select").val();

var second=$(".second_select").val();

var hour=$(".hour_select").val();

//连接变量

var real_time=year+"-"+month1+"-"+day;

var last_time=real_time+" "+hour+":"+minute+":"+second;

//输出变量到输入框里

$(".timepick").val(last_time);

})

}

else {

//当点击“取消”时，下拉框值为0

var minute=$(".minute_select").val("0");

var second=$(".second_select").val("0");

var hour=$(".hour_select").val("0");

var month1=$(".month_select").val();

var real_time=year+"-"+month1+"-"+day;

$(".timepick").val(real_time);

if(real_time)$(".datetime_pick").hide();

}

})

$(".datetime_pick").slideDown();//日期选择模块显示

})

//当更改具体月份或年份时显示不同的日历

$(".month_select,.year_select").change(function(){

var year=$(".year_select").val();

var month1=$(".month_select").val();

var data=new Date(year,month1,0);//实例化时间对象，最后一个参数为0

var sum_day=data.getDate();

var j=1;

var month="";

for(j=1;j<=sum_day;j++)

{ if(j<10) j="0"+j;

month+="<li year="+year+" day="+j+">"+j+"</li>";

}

$(".showday").html(month);//输出的变量值

//显示每一天是星期几

$(".showday li").mouseover(function(){

var date=$(this).attr("day");

var data1=new Date(year,month1-1,date);//实例化，最后一个参数是日期

var xingqi=data1.getDay();

switch(xingqi){

case 0: var weekday="今天是星期天";

break;

case 1: var weekday="今天是星期一";

break;

case 2: var weekday="今天是星期二";

break;

case 3: var weekday="今天是星期三";

break;

case 4: var weekday="今天是星期四";

break;

case 5: var weekday="今天是星期五";

break;

case 6: var weekday="今天是星期六";

break;

}

$(".show_xingqi").text(weekday);

$(".show_xingqi").show();//显示星期几的模块

})

//点击某一天，出现弹出框，点击“确认”选择时间后输出；点击“取消”直接输出

$(" .showday li").click(function(){

var day=$(this).attr("day");

var real_time=year+"-"+month1+"-"+day;

var msg=confirm("要选择时间吗？");

if(msg){

$(".hour_select,.minute_select,.second_select").change(function(){

var month1=$(".month_select").val();

var minute=$(".minute_select").val();

var second=$(".second_select").val();

var hour=$(".hour_select").val();

var real_time=year+"-"+month1+"-"+day;

var last_time=real_time+" "+hour+":"+minute+":"+second;

$(".timepick").val(last_time);

})

}

else {

var minute=$(".minute_select").val("0");

var second=$(".second_select").val("0");

var hour=$(".hour_select").val("0");

var month1=$(".month_select").val();

var real_time=year+"-"+month1+"-"+day;

$(".timepick").val(real_time);

if(real_time)$(".datetime_pick").hide();

}

})

</script>

<style>

.showday{ width:238px; height:150px; border:1px #CCC solid;}

.time_controller{ width:300px; height:50px;}

.datetime_pick{width:300px;height:260px;display:none;position:relative; }

.showday li{ width:20px; height:15px; text-align:center; line-height:15px; float:left; margin:5px 6px; list-style:none; border:1px #ccc solid; cursor:pointer;}

.showday li:hover{ color:#FFF; background-color:#39F;}

.show_xingqi{width:110px; height:40px; text-align:center; line-height:40px;display:none; position:absolute; top:50px; left:250px; color:#FFF; font-size:14px; background:url(/jscss/demoimg/201308/arrow.gif) 0 0 no-repeat; }

</style>

</head>

<body>

时间：<input type="text" size="40" name="time" class="timepick" />

</div>