Jquery日历控件代码 JS创作

时间：2013-11-08 13:20 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!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=gb2312" />
<title>Jquery日历控件</title>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
//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 first_day=new Date(year,month1-1,1);//取值并用前两个参数实例化时间对象，最后一个参数为1，表示时间对象是第month1月一号
      var blank=first_day.getDay();//取得该月1号是星期几，赋给变量
	  var sum_day=data.getDate();//取得某月一共的天数
	  var j=1;
      var a=0;
	  var month="";
      month+="<li style='background-color:#97CBFF; color:white;'>日</li><li style='background-color:#97CBFF; color:white;'>一</li><li style='background-color:#97CBFF; color:white;'>二</li><li style='background-color:#97CBFF; color:white;'>三</li><li style='background-color:#97CBFF; color:white;'>四</li><li style='background-color:#97CBFF; color:white;'>五</li><li style='background-color:#97CBFF; color:white;'>六</li>";  
for(a=0;a<blank;a++)
{month+="<li> </li>";}
	    for(j=1;j<=sum_day;j++)
  {    if(j<10) j="0"+j;//小于10的日期，前面加0
   month+="<li class='date' year="+year+" day="+j+">"+j+"</li>";//通过for循环输入每月的日历，并赋值给month变量，day属性表示具体几号，year属性表示哪一年
}
 $(".showday").html(month);//输出变量的值
 //当鼠标移到每个日期上，输出这一天是星期几
 $(".date").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();
 })
//点击某一天后，弹出确认框，当点击“确定”时，更改小时，分，秒选择框时读取选择框的值并输出时间到提交框里
  $(" .date").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 first_day=new Date(year,month1-1,1);//取值并以前两个参数实例化时间对象，最后一个参数为1，表示时间对象是第month1月一号
    var blank=first_day.getDay();
	var data=new Date(year,month1,0);//实例化时间对象，最后一个参数为0
	var sum_day=data.getDate();
	var j=1;
    var a=0;
	var month="";
 month+="<li  style='background-color:#97CBFF; color:white;'>日</li><li  style='background-color:#97CBFF; color:white;'>一</li><li  style='background-color:#97CBFF; color:white;'>二</li><li  style='background-color:#97CBFF; color:white;'>三</li><li  style='background-color:#97CBFF; color:white;'>四</li><li  style='background-color:#97CBFF; color:white;'>五</li><li  style='background-color:#97CBFF; color:white;'>六</li>";
  for(a=0;a<blank;a++)
{month+="<li> </li>";}  
for(j=1;j<=sum_day;j++)
  {   
   if(j<10) j="0"+j;
month+="<li class='date' year="+year+" day="+j+">"+j+"</li>";
}
 $(".showday").html(month);//输出的变量值
 //显示每一天是星期几
 $(".date").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();//显示星期几的模块
 })
//点击某一天，出现弹出框，点击“确认”选择时间后输出；点击“取消”直接输出
  $(" .date").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>
@charset "utf-8";
.showday{ width:350px; height:265px; border:1px #CCC solid;}
.time_controller{ width:350px; height:50px;}
.datetime_pick{width:350px;height:265px;display:none;position:relative; }
.showday li{ width:35px; height:25px; text-align:center; line-height:25px; float:left; margin:5px 6px; list-style:none; border:1px #ccc solid; cursor:pointer;}
.date: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:380px; color:#FFF; font-size:14px; background:url(http://www.codefans.net/jscss/demoimg/201311/arrow.gif) 0 0 no-repeat; }
</style>
</head>
<body>
<div class="time_controller" style="width:500px;margin:0 auto">时间：<input type="text" size="40" name="time" class="timepick" />
<div class="datetime_pick">
<div class="show_xingqi"></div>
<font color="#FF0000" size="2">选择日期：</font>
<select class="year_select">
<option value="2000">2000</option>
<option  value="2001">2001</option>
<option  value="2002">2002</option>
<option  value="2003">2003</option>
<option  value="2004">2004</option>
<option  value="2005">2005</option>
<option  value="2006">2006</option>
<option  value="2007">2007</option>
<option  value="2008">2008</option>
<option  value="2009">2009</option>
<option  value="2010">2010</option>
<option  value="2011">2011</option>
<option  value="2012">2012</option>
<option  value="2013">2013</option>
<option  value="2014">2014</option>
<option  value="2015">2015</option>
<option  value="2016">2016</option>
<option  value="2017">2017</option>
<option  value="2018">2018</option>
<option  value="2019">2019</option>
<option  value="2020">2020</option>
</select>
<font color="blue" size="2">年</font>
<select class="month_select">
<option value="01">01</option>
<option  value="02">02</option>
<option  value="03">03</option>
<option  value="04">04</option>
<option  value="05">05</option>
<option  value="06">06</option>
<option  value="07">07</option>
<option  value="08">08</option>
<option  value="09">09</option>
<option  value="10">10</option>
<option  value="11">11</option>
<option  value="12">12</option>
</select>
<font color="blue" size="2">月</font>
<a href="#" class="close"><font color="red">关闭</font></a>
<div class="showday">
</div>
<font color="#FF0000" size="2">选择时间：</font>
<select class="hour_select">
<option value="00">00</option>
<option value="01">01</option>
<option  value="02">02</option>
<option  value="03">03</option>
<option  value="04">04</option>
<option  value="05">05</option>
<option  value="06">06</option>
<option  value="07">07</option>
<option  value="08">08</option>
<option  value="09">09</option>
<option  value="10">10</option>
<option  value="11">11</option>
<option  value="12">12</option>
<option value="13">13</option>
<option  value="14">14</option>
<option  value="15">15</option>
<option  value="16">16</option>
<option  value="17">17</option>
<option  value="18">18</option>
<option  value="19">19</option>
<option  value="20">20</option>
<option  value="21">21</option>
<option  value="22">22</option>
<option  value="23">23</option>
</select>
<font color="blue" size="2">时</font>
<select class="minute_select">
<option value="00">00</option>
<option value="01">01</option>
<option  value="02">02</option>
<option  value="03">03</option>
<option  value="04">04</option>
<option  value="05">05</option>
<option  value="06">06</option>
<option  value="07">07</option>
<option  value="08">08</option>
<option  value="09">09</option>
<option  value="10">10</option>
<option  value="11">11</option>
<option  value="12">12</option>
<option value="13">13</option>
<option  value="14">14</option>
<option  value="15">15</option>
<option  value="16">16</option>
<option  value="17">17</option>
<option  value="18">18</option>
<option  value="19">19</option>
<option  value="20">20</option>
<option  value="21">21</option>
<option  value="22">22</option>
<option  value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option  value="26">26</option>
<option  value="27">27</option>
<option  value="28">28</option>
<option  value="29">29</option>
<option  value="30">30</option>
<option  value="31">31</option>
<option  value="32">32</option>
<option  value="33">33</option>
<option  value="34">34</option>
<option  value="35">35</option>
<option  value="36">36</option>
<option value="37">37</option>
<option  value="38">38</option>
<option  value="39">39</option>
<option  value="40">40</option>
<option  value="41">41</option>
<option  value="42">42</option>
<option  value="43">43</option>
<option  value="44">44</option>
<option  value="45">45</option>
<option  value="46">46</option>
<option  value="47">47</option>
<option  value="48">48</option>
<option  value="49">49</option>
<option  value="50">50</option>
<option value="51">51</option>
<option  value="52">52</option>
<option  value="53">53</option>
<option  value="54">54</option>
<option  value="55">55</option>
<option  value="56">56</option>
<option  value="57">57</option>
<option  value="58">58</option>
<option  value="59">59</option>
<option  value="60">60</option>
</select>
<font color="blue" size="2">分</font>
<select class="second_select">
<option value="00">00</option>
<option value="01">01</option>
<option  value="02">02</option>
<option  value="03">03</option>
<option  value="04">04</option>
<option  value="05">05</option>
<option  value="06">06</option>
<option  value="07">07</option>
<option  value="08">08</option>
<option  value="09">09</option>
<option  value="10">10</option>
<option  value="11">11</option>
<option  value="12">12</option>
<option value="13">13</option>
<option  value="14">14</option>
<option  value="15">15</option>
<option  value="16">16</option>
<option  value="17">17</option>
<option  value="18">18</option>
<option  value="19">19</option>
<option  value="20">20</option>
<option  value="21">21</option>
<option  value="22">22</option>
<option  value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option  value="26">26</option>
<option  value="27">27</option>
<option  value="28">28</option>
<option  value="29">29</option>
<option  value="30">30</option>
<option  value="31">31</option>
<option  value="32">32</option>
<option  value="33">33</option>
<option  value="34">34</option>
<option  value="35">35</option>
<option  value="36">36</option>
<option value="37">37</option>
<option  value="38">38</option>
<option  value="39">39</option>
<option  value="40">40</option>
<option  value="41">41</option>
<option  value="42">42</option>
<option  value="43">43</option>
<option  value="44">44</option>
<option  value="45">45</option>
<option  value="46">46</option>
<option  value="47">47</option>
<option  value="48">48</option>
<option  value="49">49</option>
<option  value="50">50</option>
<option value="51">51</option>
<option  value="52">52</option>
<option  value="53">53</option>
<option  value="54">54</option>
<option  value="55">55</option>
<option  value="56">56</option>
<option  value="57">57</option>
<option  value="58">58</option>
<option  value="59">59</option>
<option  value="60">60</option>
</select>
<font color="blue" size="2">秒</font><br>
</div>
</div>
</body>
</html>

Jquery日历控件代码 JS创作

网页特效