今天我们就用Jquery做一个时间日期选择器，当打开网页时，文本框里面显示的是当前的日期，点击文本框可以出现年、月、日的下拉菜单，并且可以选择，会根据年份的选择判断是否是闰年，从而改变二月的天数，闰年的2月是29天，不是闰年的2月是28天。并且4、6、9、11月份天数是30天，其他月份的天数是31天，这个一定要判断好。

首先我们看看主页面的代码是如何书写的：

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8" />

     <title>Document</title>

     <script src="dist/js/jquery-1.11.2.min.js" ></script>

     <script src="dist/js/bootstrap.min.js" ></script>

     <script src="riqi.js"></script>

     <link href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

 </head>

 <body>

     <input type="text" id="riqi" style="margin-top: 20px; margin-left: 100px;" />

     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

     <div class="modal-dialog">

         <div class="modal-content">

             <div class="modal-header">

                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

                 <h4 class="modal-title" id="myModalLabel">日期选择</h4>

             </div>

             <div class="modal-body">

                                     <!--

                                         作者：511108312@qq.com

                                         时间：2017-01-09

                                         描述：里面放内容，点击确定显示

                                     -->

                 <select id="nian"><!--年-->

                 </select>

                 <select id="yue"><!--月-->

                 </select>

                 <select id="tian"><!--天-->

                 </select>

             </div>

             <div class="modal-footer">

                 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                 <button type="button" class="btn btn-primary" id="sure">确定</button><!--把我要选的内容扔到文本框里-->

             </div>

         </div><!-- /.modal-content -->

     </div><!-- /.modal -->

 </div>

 </body>

 <script type="text/javascript">

 //这是加载用的

 $("#riqi").click(function(){

         $('#myModal').modal('show');/*当点击文本框的时候，要触发并显示模态框*/

         LoadNian();//调出的当前年份

         LoadYue();//调出的当前月份

         LoadTian();//调出的当前天

     })

 //给年月加个事件。这是操作用的

 $("#sure").click(function(){

         var nian = $("#nian").val();//取到后吧这三个值扔到文本框里面

         var yue = $("#yue").val();

         var tian = $("#tian").val();

         var str = nian+"-"+yue+"-"+tian;//把年月日拼字符串

         $("#riqi").val(str);

         $('#myModal').modal('hide')//选完直接关闭模态框

     })

 </script>

 </html>

之后我们看看引用文件，即js文件的代码是如何写的：riqi.js:

 // JavaScript Document

 //给年月加个事件要放上面

 $(document).ready(function(e) {//当年的选中项变的时候要从新选择下天数

     $("#nian").change(function(){

             LoadTian();

         })

     $("#yue").change(function(){//当月份的下拉变化的时候也要从新加载下天数

             LoadTian();

         })

 });

 //加载年份

 function LoadNian()

 {

     var date=new Date;

     var year=date.getFullYear(); //获取当前年份

     var str = "";

     for(var i=year-5;i<year+6;i++)//从当前年份减5，当前年份加6、取前5年后5年//i就等于年份

     {

         if(i==year)//默认定位当前年份

         {

             str +="<option selected='selected' value='"+i+"'>"+i+"</option>";//默认定位当前年份

         }

         else

         {

             str +="<option value='"+i+"'>"+i+"</option>";

         }

     }

     $("#nian").html(str);//找到ID等于nian的下拉把option扔里面，option等于str

 }

 //加载月份

 function LoadYue()

 {

     var date=new Date;

     var yue=date.getMonth()+1;

     var str = "";

     for(var i=1;i<13;i++)

     {

         if(i==yue)//当前月份

         {

             str +="<option selected='selected' value='"+i+"'>"+i+"</option>";

         }

         else

         {

             str +="<option value='"+i+"'>"+i+"</option>";

         }

     }

     $("#yue").html(str);

 }

 //加载天

 function LoadTian()

 {

     var date=new Date;

     var tian = date.getDate();//获取当前天

     var zs = 31; //总天数

     var nian = $("#nian").val();//取当前选中的年份

     var yue = $("#yue").val();//取当前选中的月份

     if(yue == 4 || yue==6 || yue==9 || yue==11)//判断什么情况下不等于31，有2个条件一个是年一个是月||或者当月份等于4，6，9，11等于30天

     {

         zs = 30;

     }

     else if(yue==2)//如果是2月

     {

         if((nian%4==0 && nian%100 !=0) || nian%400==0)//普通年条件能被4整除并且不能被100整除。或者能被400整除就是润年

         {

             zs = 29;

         }

         else

         {

             zs = 28;

         }

     }

     var str = "";

     for(var i=1;i<zs+1;i++)

     {

         if(i==tian)

         {

             str +="<option selected='selected' value='"+i+"'>"+i+"</option>";

         }

         else

         {

             str +="<option value='"+i+"'>"+i+"</option>";

         }

     }

     $("#tian").html(str);

 }

这就是我们要写的两个页面的代码了，不是特别复杂，有的人可能会说，如果我们要用的话直接从网上下载就好了，可是如果我们是要在手机客户端运用呢，那我们就要自己写了，这就是做这个的目的，下面我们看看效果：

让我们选择一个日期看看：

看看最终的显示结果是什么：

这就是我们要的效果，如果你还想继续改进可以把时间也加上，上面两个页面的代码都加了详细的注释，如果有什么问题可以在线交流，欢迎大家提出自己的意见和建议。谢谢大家的支持。怎么就是不能发到首页呢？

用Jquery做一个时间日期选择器的更多相关文章

  1. mpvue开发微信小程序之时间+日期选择器

    最近在做微信小程序,技术栈为mpvue+iview weapp组件库. 因项目需求,要用到日期+时间选择器,iview组件库目前还未提供时间日期选择器的组件,小程序官方组件日期时间也是分开的,在简书上 ...

  2. 用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。

    用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...

  3. Android中的时间日期选择器

    1.layout <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xml ...

  4. jquery做一个表单验证

    正则表达式的写法: var re=new RegExp('规则', '可选参数');var re=/规则/参数;(这个最常用) 正则表达式的规则 和其他语言的正则表达式规则一样,可以参考我的另一边博文 ...

  5. jquery做一个小的轮播插件---有BUG，后续修改

    //首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...

  6. vue 移动端添加 时间日期选择器

    效果: index.vue <template> <div class="user-wrap" style="padding-bottom: 0;tex ...

  7. Android学习之Image操作及时间日期选择器

    一.基础学习 1.ImageView是图片容器,就相当于RadioGroup是RadioButton的容器一样,是View的直接子类. 1: <ImageView 2: android:id=& ...

  8. pc端网页，移动端网页（andorid、ios）离开页面做一个时间存储

    如图所示:在一个页面中做了一个倒计时,然后用户想离开页面做其他事情,需求是离开页面之后把时间保存,下一次进来继续的时候时间还是上次离开的时间 第一次我用的事件是:  // window.onbefor ...

  9. 小白也能看懂的Redis教学基础篇——做一个时间窗限流就是这么简单

    不知道ZSet(有序集合)的看官们,可以翻阅我的上一篇文章: 小白也能看懂的REDIS教学基础篇--朋友面试被SKIPLIST跳跃表拦住了 书接上回,话说我朋友小A童鞋,终于面世通过加入了一家公司.这 ...

随机推荐

  1. jquery属性的相关js实现方法

    有些公司手机网站开发不用第三方的jquery或者zeptio,直接用原生的javascript.原生javascript功能是蛮强大的,只不过部分属性不支持IE8以下浏览器.下面对jquery相关方法 ...

  2. 一篇完整的FlexBox布局指南

    一篇完整的FlexBox布局指南 转载请标注本文链接并附带以下信息: 译:Cydiacen 作者:CHRIS COYIER 原文:A Complete Guide to Flexbox 原文更新于 2 ...

  3. windows下Visual Studio Code 1.9安装

    点击送你去官网下载vs code 进入下载页面如下 下载完成双击安装 安装完成打开之后如下图,最新版的默认中文就挺好的! 注意下面是微软建议: Note: .NET Framework 4.5.2 i ...

  4. [html] 学习笔记--Web存储

    HTML5 提供了两种在客户端存储数据的新方法之前,这些都是由 cookie 完成的.但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效 ...

  5. [html5] 学习笔记- html拖放

    拖放是一种常见的特性,即抓取对象以后拖到另一个位置,在HTML5中,拖放是标准的一部分,任何元素都能够拖放. 1.html5拖放:(drag和drop)是HTML5标准的组成部分 拖动开始:ondra ...

  6. 史上最牛逼的文件bom头清除代码，万能检测清除php，js等等

    做php开发,经常部分uft8的php文件因BOM头不同导致各种错误和错位.网上搜到的大部分所谓的去处bom工具都是2货,没有能用的.下面的一段代码,请复制到一个php文件里,然后上传到你的网站根目录 ...

  7. linux之sed的常用操作

    Sed命令: sed是一种流编辑器,它是文本处理中非常中的工具,能够完美的配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间"(patter ...

  8. Linux编程之ICMP洪水攻击

    我的上一篇文章<Linux编程之PING的实现>里使用ICMP协议实现了PING的程序,ICMP除了实现这么一个PING程序,还有哪些不为人知或者好玩的用途?这里我将介绍ICMP另一个很有 ...

  9. Java编程风格学习（二）

    二.格式规范 在上一篇的Java编程风格学习(一)中我们讲述了在Java编码中的一般原则,虽然这些原则并不涉及具体的代码规范,但是这些原则却是我们在Java开发过程中所应该遵循的规范与思想.今天我们将 ...

  10. 2732: [HNOI2012]射箭( 半平面交 )

    很久没写题解了= =，来水一发吧= = 首先这道题很明显就是求y=ax^2+bx的是否有值取，每一个式子都代表着两个半平面，然后直接半平面交就行了 借鉴了hzwer的代码，还是特别简洁的说 CODE： ...