首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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编写日期选择器

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

jquery编写日期选择器

- Author -

我之姓冠你之名

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
回顾Javascript React基础
Jun 15 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 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
pt-archiver(1) instantclient(1) 写入策略(1) 忘记密码(1) binlog(2) 增删改查(2) B+树(2) 优化(1) redo log(1) 存储过程(3)
You might like
动态生成gif格式的图像要注意？
2006/10/09 PHP
smtp邮件发送一例
2006/10/09 PHP
PHP修改session_id示例代码
2014/01/08 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
php无限级分类实现方法分析
2016/10/19 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
jQuery 通过事件委派一次绑定多种事件，以减少事件冗余
2010/06/30 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
python标准库OS模块详解
2020/03/10 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
工程质量承诺书
2014/03/27 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis