利用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获取textarea中的光标位置
May 06 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
Vue 同步异步存值取值实现案例
Aug 05 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 Javascript
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
用户的详细注册和判断
2006/10/09 PHP
php 中英文语言转换类
2011/09/07 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
Vue自定义事件(详解)
2017/08/19 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Python制作exe文件简单流程
2019/01/24 Python
pip安装python库的方法总结
2019/08/02 Python
Python列表list操作相关知识小结
2020/01/29 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
教育合作协议范本
2014/10/17 职场文书
办公室文员岗位职责
2015/02/04 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers