利用Query+bootstrap和js两种方式实现日期选择器


Posted in Javascript onJanuary 10, 2017

前言

所谓日期选择是在下拉列表中选择年、月、日,年显示前后的五年,12个月,日就是有30、31、29、28天的区别,随着月份的变而变,本文介绍了利用Query+bootstrap和js实现日期选择器的两种方法,下面来一起学习学习吧。

一、js方式的日期选择

(1)首先就是三个下拉列表了,点击年、月、日显示列表中的内容,这样就是要给这三个列表加“点击事件”onclick

<select id="nian" onclick="biantian()"></select>年
<select id="yue" onclick="biantian()"></select>月
<select id="tian"></select>日

也就是这样的效果:

利用Query+bootstrap和js两种方式实现日期选择器

(2)写js方法

注意:年月日三个选择框,那么就是要写三个方法

填充年的方法

function FillNian()
{
var b = new Date(); //取当前时间

var nian = parseInt(b.getFullYear()); //取当前年份
 

var str = "";
 

for(var i=nian-5;i<nian+6;i++) //显示前后的5年

{<br>

//判断年的当前选中,选中当前的年份


if( i==nian)


{



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


}


else


{



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


}

}

//给id名是nian的下拉菜单中加添加html,html就是上面写到的str

document.getElementById("nian").innerHTML = str;
}

写完了年方法,记得调用一下,查看效果如下:

利用Query+bootstrap和js两种方式实现日期选择器

(3)填充月的方法:这个和年的也是差不多,没有什么大的变化

function FillYue()
{
var b = new Date(); //取当前时间
 var yue = parseInt(b.getMonth()+1); //取当前月份
 
 var str = "";
 for(var i=1;i<13;i++) //循环;月份是从1开始,一年12个月,小于13
 {<br>



 //判断当前月份的选中
 if( i==yue)
 {
 
str = str+"<option selected='selected' value='"+i+"' >"+i+"</option>";
 }
 else
 {
 
str = str+"<option value='"+i+"'>"+i+"</option>";
 }
 }
 document.getElementById("yue").innerHTML = str; //将str值写到id名是yue的下拉列表中
}

写完了月的方法,记得调用一下,查看效果如下: 

利用Query+bootstrap和js两种方式实现日期选择器

(3)填充天的方法:和年和月的差不多,不一样的就是月份不一样,天数也是不一样的

function FillTian()
{
 var b = new Date();
 var tian = parseInt(b.getDate()); //获取当前天数
 
 var yue = document.getElementById("yue").value; //找到月的值
 var nian = document.getElementById("nian").value; //找到年的值
 var ts = 31;
 
 //30号的月数:月数是4、6、9、11时,天数是30天
 if(yue==4 || yue==6 || yue==9 || yue==11)
 {
 ts=30;
 }
 
 //2月不同年的天
 if(yue==2)
 {<br>
 //被4整除,同时不被100整除;或是被400整除的年
 if((nian%4==0 && nian%100 != 0) || nian%400==0)
 {
 ts = 29; //闰年
 }
 else
 {
 ts = 28; //平年
 }
 }
 
 var str = "";
 for(var i=1;i<ts+1;i++)
 {<br>

 //判断天数是否选中
 if( i==tian)
 {
 str = str+"<option selected='selected' value='"+i+"' >"+i+"</option>";
 }
 else
 {
 str = str+"<option value='"+i+"'>"+i+"</option>";
 }
 }
 document.getElementById("tian").innerHTML = str; //将str的值给id名是天的下拉列表
}

写完了日的方法,记得调用一下,查看整体效果如下: 

利用Query+bootstrap和js两种方式实现日期选择器 

闰年如下:

利用Query+bootstrap和js两种方式实现日期选择器

二、Query+bootstrap的日期选择器

想用jQuery和bootstrap,必须引入这两个的包

<script src="../jquery-1.11.2.min.js"></script>
<script src="../dist/js/bootstrap.min.js"></script>
<script src="riqishijian.js"></script>
<link href="../dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

进入正题:点击文本框会弹出个日期选择的窗口,所以

(1)写个提示字,并且写个文本框

<input type="text" id="riqi" /> //最终显示的日期时间的地方,文本框起个名字对其加事件

(2)写bootstrap的模态框,直接引用就可以

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

 //标题部分
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title" id="myModalLabel">日期选择</h4> //显示标题的地方
   </div><br>


 //主体部分
   <div class="modal-body">
    <select id="nian"> //年的下拉列表
    </select>
    <select id="yue"> //月的下拉列表
    </select>
    <select id="tian"> //天的下拉列表
    </select>
   </div><br>


 //最后部分
   <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>

(3)考虑下怎么显示这个弹出框?

单击显示日期的文本框再弹出选择框,那么就要对文本框设置事件

$("#riqi").click(function(){
 $('#myModal').modal('show'); //bootstrap直接提示怎么显示弹窗,直接拿过来用就可以 
})

看下效果:

利用Query+bootstrap和js两种方式实现日期选择器

(4)写jQuery页面:年月日的方法其实和js的写法差不多,就是样式和取赋方式和js有点区别,其他的没有什么可以注意的

当然,写完了jQuery方法,记得用的时候调用一下

jQuery页面中的年、月、日的方法:和js中的逻辑都是一样的(不多说)

//加载年份
function LoadNian()
{
 var date=new Date; //和js的方法一样取当前时间和年份
 var year=date.getFullYear();
  
 var str = "";
  
 for(var i=year-5;i<year+6;i++)
 {<br>


 //判断当前年是否选中
  if(i==year)
  {
  
str +="<option selected='selected' value='"+i+"'>"+i+"</option>";
  }
  else
  {
  
str +="<option value='"+i+"'>"+i+"</option>";
  }
 }
  
 $("#nian").html(str); //也是将值写到年的下拉列表中
}
//加载月份
function LoadYue()
{<br>
 //和js中的月份的逻辑都是一样的
 var date=new Date;
 var yue=date.getMonth()+1; //取到当前月份
  
 var str = "";
  
 for(var i=1;i<13;i++)
 {<br>



 //判断月份是否选中
  if(i==yue)
  {
  
str +="<option selected='selected' value='"+i+"'>"+i+"</option>";
  }
  else
  {
  
str +="<option value='"+i+"'>"+i+"</option>";
  }
 }
 $("#yue").html(str);
}
//加载天
function LoadTian()
{<br>
 //和js中的逻辑是一样的
 var date=new Date;
 var tian = date.getDate(); //取到天数
  
 var zs = 31; //总天数
 var nian = $("#nian").val(); //取到年的值
 var yue = $("#yue").val(); //取到月的值<br><br>

 //也是天数是30天的月份
 if(yue == 4 || yue==6 || yue==9 || yue==11)
 {
 
zs = 30;
 }
 else if(yue==2)
 {<br>



 //判断闰月的
  if((nian%4==0 && nian%100 !=0) || nian%400==0)
  {
  
zs = 29;
  }
  else
  {
  
zs = 28;
  }
 }
  
 var str = "";
  
 for(var i=1;i<zs+1;i++)
 {<br>



 //判断天数是否选中
  if(i==tian)
  {
   str +="<option selected='selected' value='"+i+"'>"+i+"</option>";
  }
  else
  {
   str +="<option value='"+i+"'>"+i+"</option>";
  }
 }
  
 $("#tian").html(str);
  
}

最后就是要选择哪一年,后面的月和日都要变,那么就要在最开始写

$(document).ready(function(e) {
 $("#nian").change(function(){ //选年改变天
  LoadTian();
  })
 $("#yue").change(function(){ //选月改变天
  
LoadTian();
  })
});

(5)把选中的年月日的值传入文本框中

$("#sure").click(function(){
 var nian = $("#nian").val(); //取到年的值
 var yue = $("#yue").val(); //取到月份的值
 var tian = $("#tian").val(); //取到天数的值
   
 var str = nian+"-"+yue+"-"+tian; //拼接字符串显示年月日
 $("#riqi").val(str); //将值放到riqi的文本框中
 $('#myModal').modal('hide') //将弹窗关闭
})

这样选择器就结束了,看下整体效果:

单击文本框,弹出日期选择框

利用Query+bootstrap和js两种方式实现日期选择器

选择一个日期,单击确定按钮

利用Query+bootstrap和js两种方式实现日期选择器

另外:也可以除了日期,也可以加上默认时间

$("#sure").click(function(){
 var nian = $("#nian").val(); //取到年的值
 var yue = $("#yue").val(); //取到月份的值
 var tian = $("#tian").val(); //取到天数的值
 
 var d = new Date();
 var str = nian+"-"+yue+"-"+tian+" "+d.getHours()+":"+d.getMinutes()+":"+d.getDate() ; //拼接字符串显示年月日,还有时间
 $("#riqi").val(str); //将值放到riqi的文本框中
 $('#myModal').modal('hide') //将弹窗关闭
})

选择效果,后面的时间是自动默认显示的:

利用Query+bootstrap和js两种方式实现日期选择器

日期选择器两种方法都可以使用。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
js实现背景图自适应窗口大小
Jan 10 #Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 #Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 #Javascript
ajax实现动态下拉框示例
Jan 10 #Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 #Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 #Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 #Javascript
You might like
终于听上了直流胆调频
2021/03/02 无线电
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
javascript每日必学之继承
2016/02/23 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
python实现的文件夹清理程序分享
2014/11/22 Python
Python set常用操作函数集锦
2017/11/15 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
请说出几个常用的异常类
2013/01/08 面试题
店长岗位职责
2013/11/21 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年物流工作总结
2014/11/25 职场文书
实习单位鉴定意见
2015/06/04 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
如何使用SQL Server语句创建表
2022/04/12 SQL Server