jquery编写日期选择器

时间：2021-09-05 来源：互联网编辑：宝哥软件园浏览：次

使用jquery作为日期和时间选择器，最好使用引导弹出窗口

实现：

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

(2)选择下拉弹出窗口中显示的日期和时间

(三)当年前后五年

(4)月份固定为12个月

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

(6)点击确定关闭弹出窗口，文本框中的时间被编程选择时间

1.如果jQuery和bootstrap弹出，必须引入文件包；

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

3.去bootstrap找模态盒，复制，贴在上面；

4.去掉模态框中无用的东西，增加三个下拉框；

代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；Charset=utf-8'/title无标题文档/title脚本src=' http : dist/js/jquery-1 . 11 . 2 . min . js '/script script src=' http 3360 dist/js/bootstrap . min . js '/脚本链接href=' dist/CSS/bootstrap . min . CSS ' rel=' external no follow ' rel='样式表' type=' text/CSS '/head dy！-文本框-输入类型=' text' id=' rq'/！-modal box-div class=' modal fade ' id=' my modal ' tabindex='-1 ' role=' dialog ' aria-由=' mymodallabel' aria标记-hidden=' true ' div class=' modal-dialog ' div c lass=' modal-content ' div class=' modal-header ' Button type=' Button ' class=' close ' data-misse=' modal ' aria-hidden=' true '/Button H4类=' modal-title ' id=' mymodallabel ' date/H4/div class='-内容-！-三个下拉框-选择id='年'/选择年选择id='月'/选择月选择id='日'/选择日/div div class='模态-页脚'！-confirm button plus event to write click event-button type=' button ' class=' btnbtn-primary ' id=' queing ' confirm/button/div/div！- /.模态-内容- /div！-/.modal-/div/body/html主页上的一切都完成了。写js代码，可以写在脚本标签里。然而，为了将来的清晰和方便，创建一个新的js文件：

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

要写：

//当前时间显示在文本框中：//准备好：$(文档)。ready(函数(e){//获取时间：var Date=new Date()；//获取年份var nian=date . getfullyear()；//得到月份，记得加1 var yue=date . getmonth()1；//get day:var Tian=date . getdate()；//打印并拼接字符串$('#rq ')。val(年'-'月'-'天)；});记得在首页引用！看图片：

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

//文本框点击事件：$('#rq ')。点击(function(){ //手动打开模态框的方法：找到模态框的id，并按照方法$('#myModal ')。Bookstrap中的情态(' show ')；//执行三个方法fnian()；fyue()；ftian()；})所以当我点击文本框时：看图片：

7.点击某个事件，先不要添加，因为你要传给他。我们先写三个方法：

//写方法，//加载当年的方法函数f nian(){//先取当年var Date=new Date()；var nian=date . getfullyear()；//定义要接收的变量：var str=//for循环开始：for(var I=nian-5；inian 6；I) {//如果是当年，设置为value if(I==nian){ str=str ' option selected=' selected ' value=' I ' ' I '/option '；} else {//如果不是，str=str '选项值=' I ' ' I '/选项正常显示；} } $('#nian ')。html(字符串)；}//加载月份的方法：函数month(){ var date=new date()；//得到月份，记得加1 var yue=date . getmonth()1；//先取当月：var Date=new Date()；var yue=data . getmonth()1；//定义要接收的变量：var str=//for循环(var I=1；i13I) {//如果是当月，设置为value if(I==yue){ str=str ' option selected=' selected ' value=' I ' ' I '/option '；} else {//如果不是，str=str '选项值=' I ' ' I '/选项正常显示；} } $('#yue ')。html(字符串)；//document.getElementById('yue ')。innerHTML=str}//加载当天的方法函数f Tian(){//获取当天；var Date=new Date()；var Tian=date . getdate()；//以月、年为判断：var nian=$('#nian ')。val()；var yue=$('#yue ')。val()；//设置一个总数，判断完成后更改。var zs=31//判决来了！如果(yue==4 | | yue==6 | | yue==9 | | yue==11){//如果是4.6.9.11月，zs=30为每月30天；} else if(yue==2) {//如果是二月，判断是否是闰年if ((nian% 4==0nian0！=0) ||年@0==0) {//如果是闰年，2月29日zs=29} else {//否则，2月是28天，zs=28}} //for循环starts//定义要接收的变量：var str=//for循环开始：for(I=1；izs 1；I) {//如果是当天，设置为value if(I==Tian){ str=str ' option selected=' selected ' value=' I ' ' I '/option '；} else {//如果不是，str=str '选项值=' I ' ' I '/选项正常显示；} } $('#tian ')。html(字符串)；}很好。加载年、月、日的方法已经编写并执行。

请看下图：

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

首先将id添加到模式框中的确定按钮

按钮类型=' button ' class=' btnbtn-primary ' id=' queing ' ok/button

设置id并写入事件：

//最后，添加click事件$(“#排队”)。click(function(){ varnian=$(' # nian ')。val()；var yue=$('#yue ')。val()；var tian=$('#tian ')。val()；$('#rq ')。val(年'-'月'-'天)；$('#myModal ')。情态(' hide ')；})点击关闭模态框，传输数据；

竣工图：