利用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 相关文章推荐
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 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
php自动给网址加上链接的方法
2015/06/02 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
require.js中的define函数详解
2017/07/10 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
python绘制双柱形图代码实例
2017/12/14 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Python中按键来获取指定的值
2019/03/02 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
Keras搭建自编码器操作
2020/07/03 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
html5启动原生APP总结
2020/07/03 HTML / CSS
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
生日派对邀请函
2014/01/13 职场文书
老师对学生的寄语
2014/04/09 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
无工作证明怎么写
2015/06/15 职场文书
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers