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 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
javascript hashtable 修正版 下载
Dec 30 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
Vue+Django项目部署详解
May 30 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
vue中改变滚动条样式的方法
Mar 03 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
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
php中Snoopy类用法实例
2015/06/19 PHP
php的socket编程详解
2016/11/20 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
python类中super()和__init__()的区别
2016/10/18 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
五年级科学教学反思
2014/02/05 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
节约用电标语
2014/06/17 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
千手观音观后感
2015/06/03 职场文书