Jquery日历控件代码-原创手记-慕课网

<!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>
<title>Jquery日历控件代码_网页代码站(www.webdm.cn)</title>
<script type="text/javascript" src="/themes/script/jquery.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(/jscss/demoimg/201308/arrow.gif) 0 0 no-repeat; }
</style>
</head>

<body>


<div class="time_controller">
时间：<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>

<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</body>
</html>