jquery编写日期选择器


Posted in Javascript onMarch 16, 2017

使用jquery做一个日期时间选择器,最好使用bootstrap弹窗

实现:

(1)点击文本框弹出窗口;

(2)弹窗里面显示日期时间选择下拉

(3)年份取当前年份前后五年

(4)月份固定12个月

(5)天数根据年份与月份的变化而变化

(6)点击确定,关闭弹窗,文本框里面的时间编程选中时间

1.若是jQuery跟bootstrap弹窗,必须引入文件包;

2.写一个文本框,给他id用来写事件;

3.去bootstrap里面找到模态框,复制,黏上就行了;

jquery编写日期选择器

4.把模态框里没用的东西去掉,并加上三个下拉框;

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 <script src="dist/js/jquery-1.11.2.min.js"></script>
 <script src="dist/js/bootstrap.min.js"></script>
 <link href="dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css" />
</head>
<body>
<!--文本框-->
<input type="text" id="rq"/>
<!--模态框-->
<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">
    <!--    内容-->
    <!--    三个下拉框-->
    <select id="nian"></select>年
    <select id="yue"></select>月
    <select id="ri"></select>日
   </div>
   <div class="modal-footer">

    <!--确定按钮加上事件,用来写点击事件-->
    <button type="button" class="btn btn-primary" id="queding">确定</button>
   </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal -->
</div>
</body>
</html>

主页的东西都完事了,来写js代码,js代码可以在script标签里写,但是为了清晰,且用于日后方便实用,新建js文件:

5.先让他的文本框里显示一下当前的时间吧:

来写:

//文本框内显示当前时间:
// 准备好:
$(document).ready(function(e){
 // 来获取时间:
 var date = new Date();
 //获取年
 var nian = date.getFullYear();
 //获取月,记得加1
 var yue = date.getMonth()+1;
 //获取天:
 var tian = date.getDate();
 //打印,拼接字符串
 $("#rq").val(nian+"-"+yue+"-"+tian);
});

记得在主页面引用哦!看图:

jquery编写日期选择器

6.来写文本框的点击事件吧,让他点击文本框的时候弹出模态框:

//文本框点击事件:
 $("#rq").click(function(){
  // 手动打开模态框的方法:找到模态框的id,根据Bookstrap里面的方法
  $('#myModal').modal('show');
  // 执行三个方法
  fnian();
  fyue();
  ftian();
 })

这样当我点击文本框:看图:

jquery编写日期选择器

7.点击确定的事件先不要加,因为还要传给他东西,先来写那三个方法吧:

// 写方法,
//加载年份的方法
function Fnian()
{
 //先来取当前年份
 var date = new Date();
 var nian = date.getFullYear();
 // 定义个变量来接收:
 var str = "";
 //for循环走起:
 for(var i=nian-5;i<nian+6;i++)
 {
  //判断若是当前年份,设为value
  if(i==nian)
  {
   str = str + "<option selected='selected' value='" + i + "'>" + i + "</option>";
  }
  else
  {
   //若不是,正常显示
   str = str +"<option value='"+i+"'>"+i+"</option>";
  }
 }
 $("#nian").html(str);
}
//加载月份的方法:
function Fyue()
{
 var date = new Date();
 //获取月,记得加1
 var yue = date.getMonth()+1;
 //先取当前月份:
 var date = new Date();
 var yue = data.getMonth()+1;
 // 定义个变量来接收:
 var str = "";
 // for循环走
 for(var i=1;i<13;i++)
 {
  //判断若是当前月份,设为value
  if(i==yue)
  {

   str = str+"<option selected='selected' value='"+i+"'>"+i+"</option>";
  }
  else
  {
   //若不是,正常显示
   str = str +"<option value='"+i+"'>"+i+"</option>";
  }
 }
 $("#yue").html(str);
 // document.getElementById("yue").innerHTML=str;
}
//加载天的方法
function Ftian()
{
 //获取当天;
 var date = new Date();
 var tian = date.getDate();
 //把月份与年份取过来,用于判断:
 var nian = $("#nian").val();
 var yue = $("#yue").val();
 //设一个总数,判断完成后更改他就好
 var zs = 31;
 //判断来了!
 if(yue==4||yue==6||yue==9||yue==11)
 {
  //若是4.6.9.11月,每月三十天
  zs = 30;
 }
 else if(yue==2)
 {
  //若是2月,再判断,是否为闰年
  if((nian%4==0 && nian%100!=0) || nian%400==0 )
  {
   //若是闰年,2月29天
   zs = 29;
  }
  else
  {
   //否则2月为28天
   zs = 28;
  }
 }
 // for循环搞起
 // 定义个变量来接收:
 var str = "";
 //for循环走起:
 for(i=1;i<zs+1;i++)
 {
  //判断若是当天,设为value
  if(i==tian)
  {
   str = str + "<option selected='selected' value='" + i + "'>" + i + "</option>";
  }
  else
  {
   //若不是,正常显示
   str = str +"<option value='"+i+"'>"+i+"</option>";
  }
 }
 $("#tian").html(str);
}

好。加载年份、月份、天的方法都写完了,上面已经执行了,

看下图:

jquery编写日期选择器

8.再来写确定按钮的点击事件:

先给模态框里面的确定按钮添加上id吧

<button type="button" class="btn btn-primary" id="queding">确定</button>

设置好了id,去写事件:

//最后给确定按钮加点击事件
 $("#queding").click(function(){
  var nian = $("#nian").val();
  var yue = $("#yue").val();
  var tian = $("#tian").val();
  $("#rq").val(nian+"-"+yue+"-"+tian);
  $('#myModal').modal('hide');
 })

点击关闭模态框,并传去数据;

完成图:

jquery编写日期选择器

点击确定:

jquery编写日期选择器

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
js实现不重复导入的方法
Mar 02 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
详解如何运行vue项目
Apr 15 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
jquery事件与绑定事件
Mar 16 #Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 #Javascript
JSON与js对象序列化实例详解
Mar 16 #Javascript
JS对象的深度克隆方法示例
Mar 16 #Javascript
JS对象深度克隆实例分析
Mar 16 #Javascript
JS异步加载的三种实现方式
Mar 16 #Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 #Javascript
You might like
简单的页面缓冲技术
2006/10/09 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
javascript 节点排序 2
2011/01/31 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
JS删除String里某个字符的方法
2021/01/06 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
Python爬虫爬验证码实现功能详解
2016/04/14 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
作风转变心得体会
2014/09/02 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
大学生实习证明
2015/06/16 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书