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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery日历控件</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8">
//jquery等待页面加载完执行以下程序
$(document).ready(function(){
   //点击“关闭”按钮关闭日历
   var targetObj,show,year,month1;
   var options ="",thisYear=(new Date()).getFullYear();
 for(i=0; i<10; i++)
 {
 options = options+"<option value='"+(i+thisYear)+"'>"+(i+thisYear)+"</option>";
 }
 $('#year_select').html(options);
   function init(){
 show="";
 year=$("#year_select").val();
 month1=$("#month_select").val();
 var data=new Date(year,month1,0);//取值并实例化时间对象,最后一个参数为0,能够取得某年某月一共有多少天
 var sum_day=data.getDate();//取得某月一共的天数
 var j=1;
  
    for(j=1;j<=sum_day;j++){    
 if(j<10) j="0"+j;//小于10的日期,前面加0
 show+="<li year="+year+" day="+j+">"+j+"</li>";//通过for循环输入每月的日历,并赋值给month变量,day属性表示具体几号,year属性表示哪一年
 }
 $(".showday").html(show);//输出变量的值
 }
 $("#month_select,#year_select").change(function(){
 init();
 });
 $(".close").click(function(){
 $(".datetime_pick").slideUp();
 });
 
     //点击时间输入框,弹出日历
$(".timepick").focus(function(){
 targetObj=$(this);
 init();
 $(".datetime_pick").slideDown();//日期选择模块显示
 //alert(targetObj.parent().offset().left);
 $(".datetime_pick").animate({left:""+targetObj.parent().offset().left});
});
 $(" .showday li").live('click',function(){
    var day=$(this).attr("day");
 var real_time=year+"-"+month1+"-"+day;
 targetObj.val(real_time);
 /*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;
 //输出变量到输入框里
 
 })
 }
 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();
 }*/
 });
//当更改具体月份或年份时显示不同的日历
 $("#form").click(function(e){
 e.stopPropagation();
 var _this=$(e.target);
 if(e.target.nodeName=="BUTTON"){
 _this.attr('disabled', 'disabled');
 /*var inputs=[];
 inputs.push(_this.next());
 inputs.push(_this.next().next());*/
 var inputs=_this.parent().children("input");
 var i,pattern = /^\d{4}-((0[1-9])|(1[0-2]))-((0[1-9])|([1-2][0-9])|(3[0-1]))$/;
 
 for(i=0;i<inputs.length;i++){
 //console.log(inputs[i]);
 //alert(inputs[i].value);
 if(!(pattern.test(inputs[i].value))){
 alert("请查看是否是时间格式,前后不要添加空格!");
 _this.removeAttr("disabled");
 return;
 }
 }
 var date1 = new Date(inputs[0].value.replace(/-/g, '/')),date2=new Date(inputs[1].value.replace(/-/g, '/'));
 if(date1.getTime()>=date2.getTime()){alert("开始时间应该小于结束时间");_this.removeAttr("disabled");return;}
 $.post("url",{proname:_this.attr("id"),start:inputs[0].value,finish:inputs[1].value},function(data){


 check=data;
 _this.removeAttr("disabled");

 
 }
 });
});
</script>
<style>
.showday{ width:238px; height:150px; border:1px #CCC solid;}
.time_controller{ width:20%; height:50px;float:left;}
.datetime_pick{width:20%;height:auto;float:left;display:none;top:50px;border:1px #ccc solid;padding:0px;position:absolute;top:100px;background:silver;}
.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:#000; background-color:#fff;}


</style>
</head>


<body style="background:#F5F5F5">
<!-- 代码 开始 -->
<div id="form">
<div class="time_controller">SRF起始和结束<button type="submit" id="pro1"class="btn btn-default">提交时间</button><input type="text" size="40" name="time"  class="timepick" /><input type="text" size="40" name="time" class="timepick" /></div>
<div class="time_controller">国家创新实验起始和结束<button type="submit" id="pro2" class="btn btn-default">提交时间</button><input type="text" size="40" name="time"  class="timepick" /><input type="text" size="40" name="time" class="timepick" /></div>
<div class="time_controller">创业实训起始和结束<button type="submit" id="pro3" class="btn btn-default">提交时间</button><input type="text" size="40" name="time"  class="timepick" /><input type="text" size="40" name="time" class="timepick" /></div>
<div class="time_controller">创业实践起始和结束<button type="submit" id="pro4"class="btn btn-default">提交时间</button><input type="text" size="40" name="time"  class="timepick" /><input type="text" size="40" name="time" class="timepick" /></div>
</div>
<div class="datetime_pick">
<font color="#FF0000" size="2">选择日期:</font>
<select id="year_select">


</select>
<font color="blue" size="2">年</font>


<select id="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>


<!-- 代码 结束 -->
</body>
</html>

你可能感兴趣的:(Jquery日历控件)