用Jquery做一个时间日期选择器
今天我们就用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做一个时间日期选择器的更多相关文章
- mpvue开发微信小程序之时间+日期选择器
最近在做微信小程序,技术栈为mpvue+iview weapp组件库. 因项目需求,要用到日期+时间选择器,iview组件库目前还未提供时间日期选择器的组件,小程序官方组件日期时间也是分开的,在简书上 ...
- 用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。
用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...
- Android中的时间日期选择器
1.layout <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xml ...
- jquery做一个表单验证
正则表达式的写法: var re=new RegExp('规则', '可选参数');var re=/规则/参数;(这个最常用) 正则表达式的规则 和其他语言的正则表达式规则一样,可以参考我的另一边博文 ...
- jquery做一个小的轮播插件---有BUG，后续修改
//首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...
- vue 移动端添加 时间日期选择器
效果: index.vue <template> <div class="user-wrap" style="padding-bottom: 0;tex ...
- Android学习之Image操作及时间日期选择器
一.基础学习 1.ImageView是图片容器,就相当于RadioGroup是RadioButton的容器一样,是View的直接子类. 1: <ImageView 2: android:id=& ...
- pc端网页，移动端网页（andorid、ios）离开页面做一个时间存储
如图所示:在一个页面中做了一个倒计时,然后用户想离开页面做其他事情,需求是离开页面之后把时间保存,下一次进来继续的时候时间还是上次离开的时间 第一次我用的事件是: // window.onbefor ...
- 小白也能看懂的Redis教学基础篇——做一个时间窗限流就是这么简单
不知道ZSet(有序集合)的看官们,可以翻阅我的上一篇文章: 小白也能看懂的REDIS教学基础篇--朋友面试被SKIPLIST跳跃表拦住了 书接上回,话说我朋友小A童鞋,终于面世通过加入了一家公司.这 ...
随机推荐
- doubango地址配置
转自:http://wiki.sip2sip.info/projects/sip2sip/wiki/SipDeviceConfiguration SIP Device Configuration Th ...
- Bootstrap入门（三）<p>标签的css样式
Bootstrap入门(三)<p>标签的css样式 前提:引入css文件,内容放在一个class为container的div中 <p>标签属性 1.“ text-left ...
- 关于多字节字符入库失败处理（所谓的Emji），该处理是舍弃特殊字符
具体处理方法及样例如下: /** * 屏蔽超过三个字节以上的字符 * @param strByte * @return */ public static String filterUtf8(byte[ ...
- HDU4127(IDA*)
Flood-it! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- OpenLayers.Map的一些特殊事件
开年上班的第二天,无意中看到一些没见过的事件,特地来给广大人民群众报个信. 众所周知的,map里面的 eventListeners 支持的事件挺多的,比如: var map = new OpenLay ...
- Unity随手记
过年11天假期,带娃带了7天,吃吃喝喝.也看了点书,<射雕英雄传>(书)看了一半,还有就是在看<unity官方案例精讲>这本. 随手记一些自觉有价值或者有意思的点. 1. 对脚 ...
- EF6多线程与分库架构设计之Repository
1.项目背景 这里简单介绍一下项目需求背景,之前公司的项目基于EF++Repository+UnitOfWork的框架设计的,其中涉及到的技术有RabbitMq消息队列,Autofac依赖注入等常用的 ...
- C++编程练习(9)----“图的存储结构以及图的遍历“（邻接矩阵、深度优先遍历、广度优先遍历）
图的存储结构 1)邻接矩阵 用两个数组来表示图,一个一维数组存储图中顶点信息,一个二维数组(邻接矩阵)存储图中边或弧的信息. 2)邻接表 3)十字链表 4)邻接多重表 5)边集数组 本文只用代码实现用 ...
- uml系列（七）——交互图
交互图是uml中描述系统中的对象如何进行交互动作的 . 废话不多说,还是来张图: 概念 交互图,主要描述的是系统中的一组对象的消息的传递的,为对象间的交互定义了一个可视的表示方法. ...
- 初探Lambda表达式/Java多核编程【2】并行与组合行为
今天又翻了一下书的目录,第一章在这之后就结束了.也就是说,这本书所涉及到的新的知识已经全部点到了. 书的其余部分就是对这几个概念做一些基础知识的补充以及更深层次的实践. 最后两个小节的内容较少,所以合 ...