文档章节

Jquery日历控件

吟啸_徐行
 吟啸_徐行
发布于 2014/02/20 21:32
字数 1743
阅读 97
收藏 2
<!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>

© 著作权归作者所有

共有 人打赏支持
吟啸_徐行
粉丝 18
博文 109
码字总数 15832
作品 0
深圳
高级程序员
私信 提问
如何使用 jQuery 和 CSS3 创建一个日历控件

这个教程将教你如何使用 jQuery 和 CSS3 来创建一个绚丽的日历控件。我们将使用 CSS 来做样式,使用 jQuery 和 jQuery UI 来做功能。我们将只使用 jQuery UI 中的 “Datepicker” 脚本,所以...

虫虫
2012/04/08
6.6K
4
给开发者准备的 10 款最好的 jQuery 日历插件

这篇文章介绍的是 10 款最棒而且又很有用的 jQuery 日历插件,允许开发者们把这些漂亮的日历插件结合到自己的网站中。这些日历插件易用性都很强,轻轻松松的就可以把漂亮的日历插件装饰到你的...

oschina
2014/01/27
50.9K
10
10个顶级的CSS UI开源框架

随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验。作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地...

k_k_anna
2015/03/12
0
0
国产Ajax框架 DWZ 发布 1.1.6 RC3 版本

DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. 设计目标是简单实用,快速开发,降低ajax开发成本。 该版本主要改进内容: 日历控件添加自定义...

小编辑
2010/12/29
1K
5
10 新鲜的 jQuery 插件(2012年1月)

1. jQuery UI Bootstrap 一个基于 Twitter Bootstrap 的 jQuery UI 主题 2. jqGrid 这是非常棒的jQuery 表格插件,在线演示:here. 3. Cloud Zoom Cloud Zoom 是一个小型的图像放大镜插件,放...

红薯
2012/02/01
4.8K
6

没有更多内容

加载失败,请刷新页面

加载更多

Android 通知Notify

MainActivity { private NotificationManager manager; onCreate() { manager = (NotificationManager)getSystemService(Context.NOTIFICATION_SERVICE); } public void btnNotify(View view......

Coding缘
18分钟前
0
0
Android 人脸识别SDK开发

目前我们的应用内使用了 ArcFace 的人脸检测功能,其他的我们并不了解,所以这里就和大家分享一下我们的集成过程和一些使用心得 集成 ArcFace FD 的集成过程非常简单 在 ArcFace FD 的文档上...

是哇兴哥棒棒哒
19分钟前
0
0
《市场营销》的读后感作文3000字

《市场营销》的读后感作文3000字: 大家好,这是我领读《市场营销》教材的第一篇读书笔记(不了解此事的朋友请阅读和小马宋一起读《市场营销》)。我们这一周阅读的是《市场营销》(以我手里...

原创小博客
24分钟前
1
0
js判断input输入保留正整数和两位小数实现方法

// 均价 checkKeydown(value, e){ this.registerForm.averagePrice = this.changeNumber2(value) }, // 预算 changsoldBudget(value) { this.registerFo......

五个半柠檬
25分钟前
1
0
Kafka+Flink 实现准实时异常检测系统

1.背景介绍 异常检测可以定义为“基于行动者(人或机器)的行为是否正常作出决策”,这项技术可以应用于非常多的行业中,比如金融场景中做交易检测、贷款检测;工业场景中做生产线预警;安防...

架构师springboot
31分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部