利用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 相关文章推荐
使用js检测浏览器的实现代码
May 14 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
js倒计时显示实例
Dec 11 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 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入门小知识
2008/03/24 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
python 多线程应用介绍
2012/12/19 Python
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
django实现分页的方法
2015/05/26 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
python 创建一维的0向量实例
2019/12/02 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
python 调用Google翻译接口的方法
2020/12/09 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
环境科学专业大学生自荐信格式
2013/09/21 职场文书
英语专业推荐信
2013/11/16 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
结婚司仪主持词
2015/06/29 职场文书
中学团支部工作总结
2015/08/13 职场文书
python之django路由和视图案例教程
2021/07/26 Python