jquery编写日期选择器

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

实现：

（1）点击文本框弹出窗口；

（2）弹窗里面显示日期时间选择下拉

（3）年份取当前年份前后五年

（4）月份固定12个月

（5）天数根据年份与月份的变化而变化

（6）点击确定，关闭弹窗，文本框里面的时间编程选中时间

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

2.写一个文本框，给他id用来写事件；

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

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

代码：

rush:xhtml;">

dismiss="modal" aria-hidden="true">×

年 月 日

<!--确定按钮加上事件，用来写点击事件--> <button type="button" class="btn btn-primary" id="queding"&gt;确定</button>

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

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

来写：

rush:js;"> //文本框内显示当前时间： // 准备好： $(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); });

记得在主页面引用哦！看图：

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

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

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

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

rush:js;"> // 写方法， //加载年份的方法 function Fnian() { //先来取当前年份 var date = new Date(); var nian = date.getFullYear(); // 定义个变量来接收： var str = ""; //for循环走起： for(var i=nian-5;i" + i + ""; } else { //若不是，正常显示 str = str +""+i+""; } } $("#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+"

"+i+"";
}
else
{
//若不是，正常显示
str = str +""+i+"";
}
}
$("#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 + "" + i + "";
}
else
{
//若不是，正常显示
str = str +""+i+"";
}
}
$("#tian").html(str);
}

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

看下图：

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

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

设置好了id，去写事件：

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

点击关闭模态框，并传去数据；

完成图：

点击确定：

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：jquery事件与绑定事件下一篇：jquery PrintArea 实现票据的套打功

相关推荐

---

jquery页面搜索关键词突出显示

页面搜索关键词突出 // 页面搜索关键词突出 $(function () { $(&quot;.list_r&quot;).find(&#39;span&#39;).css({ // 每次搜索开始，先把所有字体颜色恢复初始状态 &#39;color&#39;: &quot;#838792&quot;

作者：今♀妃惜彼 时间：2024-09-23

jQuery实时显示日期、时间

jQuery实时显示日期、时间 html: &lt;span id=&quot;time&quot;&gt;&lt;/span&gt; js: &lt;script src=&quot;Js/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;%--引用jQuery

作者：今♀妃惜彼 时间：2024-09-23

jQuery 添加水印

jQuery 添加水印 &lt;script src=&quot;../../../../AJs/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; $(document).re

作者：今♀妃惜彼 时间：2024-09-23

Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息

中文：Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息，之所以出现此错误，常见的原因是：通过调用Response.Write()修改相应时，将启用响应筛选器、HttpModules或服务器追踪。详细信息：分析附近的“输

作者：今♀妃惜彼 时间：2024-09-23

Asp.net 后台调用js方法

1. 用Response.Write方法 代码如下： Response.Write(&quot;&lt;script type=&#39;text/javascript&#39;&gt;alert(&quot;XXX&quot;);&lt;/script&gt;&quot;); 此方只能调用内部函数

作者：今♀妃惜彼 时间：2024-09-23

Jquery实现按钮点击遮罩加载，处理完后恢复

Jquery实现按钮点击遮罩加载，处理完后恢复 思路： 1.点击按钮调用OnClientClick事件，添加dom元素及样式。 2.当Click中逻辑执行完后，在Click中调用js方法删除掉刚才添加的dom元素。 1 &lt;%@ Page Language=&quot;C#&quot; Auto

作者：今♀妃惜彼 时间：2024-09-23

.Net后台调用js，提示、打开新窗体、关闭当前窗体

.Net后台调用js，提示、关闭当前窗体、打开新窗体 Response.Write(&quot;&lt;script&gt;window.alert(&#39;支付成功!&#39;);window.open(&#39;/JkCommerce/&quot; + href + &quot;&#39;,&

作者：今♀妃惜彼 时间：2024-09-23

.net 搜索联想词

思路： 1.ajax请求后台方法获取数据。 2.通过jquery将请求到的数据显示在页面上。 前台 &lt;div class=&quot;sc_con&quot; id=&quot;bbsearch&quot;&gt; &lt;input type=&quot;text&quot; class=&

作者：今♀妃惜彼 时间：2024-09-23

JS点击子元素不触发父元素点击事件(js阻止冒泡)

&lt;html&gt; &lt;title&gt;&lt;/title&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;style type=&quot;text/css&quot;&gt; .divone{width:100

作者：今♀妃惜彼 时间：2024-09-23

jQuery表单验证提交：前台验证一

jQuery表单验证提交：前台验证一（图文+视频）

作者：编程之家 时间：2023-09-13

小编推荐

苹果市值2025年有望达4万亿美元

• • 微信青少年模式全新升级：视频号内容分
• • 《地下城与勇士DNF》永久交通卡卡面上线
• • 优酷为方便长辈看视频，上线银发剧场！
• • 微信读书集成腾讯混元AI技术，可以一日
• • 京东快递上线11项会员权益
• • 高德地图功能升级，新增安全预警
• • 小爱同学多模态能力升级，引领智能生活

热门标签更多

• 友情链接:
• ai导航

• 编程之家
-
• 我要投稿
-
• 广告合作
-
• 联系我们
-
• 免责声明
-
• 网站地图

版权所有 © 2018编程之家闽ICP备13020303号-8

微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！