用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做一个时间日期选择器

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

用Jquery做一个时间日期选择器

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

用Jquery做一个时间日期选择器

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

上一篇:【转】Servlet 生命周期、工作原理


下一篇:转 Oracle 11g服务详细介绍