当前位置：首页 > 网页特效 > 时间日期 >

原创Jquery日历插件

时间：2013-08-26 07:22 来源：互联网作者：源码搜藏收藏推荐

<!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" charset="utf-8">
//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(http://www.codefans.net/jscss/demoimg/201308/arrow.gif) 0 0 no-repeat; }
</style>
</head>

</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>
<font color="blue" size="2">月</font>
<a href="#" class="close"><font color="red">关闭</font></a>

</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>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

原创的Jquery日历控件特效，网页上的Jquery日期选择器，本插件支持只选择日期或者日期、时间都选择，时间可以精确到秒。年份暂定为从2000年到2020年（范围自己可以改，easy...)，本jQ日期时间插件的特色是鼠标移到日期上，就会显示这一天是星期几，比较直观。时间仓促，控件美化一般，呵呵。水平好的自己美化吧。

由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-shijian/5485.html