序

所谓日期选择，就是从下拉列表中选择年、月、日，年显示前后相差30、31、29、28天。介绍了利用查询引导和js实现日期选择器的两种方法。让我们一起学习。

1.js模式下的日期选择

(1)首先，有三个下拉列表。单击年、月和日以显示列表中的内容，这意味着在这三个列表中添加“单击事件”

select id=' nian ' onclick=' bian Tian()'/select year select id=' yue ' onclick=' bian Tian()'/select month select id=' Tian '/select day就是这样的效果：

(2)编写js方法

注意：年、月、日有三个选择框，所以有三种写法

填充年份的方法

函数fillinian(){ var b=new Date()；//取当前时间var nian=parsent(b . getfullyear())；//取当年var str=for(var I=年-5；inian 6；I) //显示前后五年{br//判断当前选择的年份，如果(I==年){str=str '选项选中=' selected '值=' I ' ' I '/选项，则选择当前年份；} else { str=str ' option value=' I ' ' ' I '/option '；} }//将html添加到id名为nian的下拉菜单中。html是strdocument . getelementbyid(' nian ')。innerhtml=str}写完年法，记得叫它，检查效果如下：

(3)补月的方法：这个和当年差不多，没有大的变化

函数fill yue(){ var b=new Date()；//取当前时间var yue=parsent(b . getmonth)(1)；//取当月var str=for(var I=1；i13I) //周期；月份从1开始，一年12个月，小于13 {br //判断当前月份的所选if(I==yue){ str=str ' option selected=' selected ' value=' I ' ' I '/option '；} else { str=str ' option value=' I ' ' ' I '/option '；} } document.getElementById('yue ')。innerHTML=str//将str值写入id名为yue的下拉列表。}写完月的方法，记得叫它，检查效果如下：

(3)补天法：类似年、月补天法。不同的是月份不同，天数也不同

函数fill Tian(){ var b=new Date()；var Tian=ParSeint(b . GetDate())；//获取当天var yue=document . getelementbyid(' yue ')。价值；//查找month var nian=document . getelementbyid(' nian ')的值。价值；//求年var ts=31的值；//30日的月数：当月数为4、6、9、11时，如果(yue==4 | | yue==6 | | yue==9 | | yue==11){ ts=30；}//二月不同年份的天数如果(yue==2) {br //可被4整除，且不能同时被100整除；或者年度如果能被400整除((年% 4==0年0！=0)| | nian @ 0==0){ ts=29；//闰年} else { ts=28//平均年份} } var str=for(var I=1；它的1；I) {br /} else { str=str ' option value=' I ' ' ' I '/option '；} } document . getelementbyid(' Tian ')。innerHTML=str//将str的值赋予id名称为day的下拉列表。}写完天之法，记得叫它，检查整体效果如下：

闰年如下：

第二，查询引导的日期选择器

如果您想使用jQuery和bootstrap，您必须引入这两个包

脚本src='http:/jquery-1 . 11 . 2 . min . js '/script script src=' http :/dist/js/bootstrap . min . js '/script script src=' http : riqishijian . js '/script link href='./dist/CSS/bootstrap . min . CSS ' rel='样式表' type=' text/CSS '/言归正传：点击文本框会弹出选择日期的窗口，所以

(1)写一个提示词和一个文本框

Input type='text' id='riqi'///最后显示日期和时间的地方，给文本框命名并添加一个事件。(2)写引导模式框，直接参考即可。

div class=' modal fade ' id=' myModal ' tabindex='-1 ' role=' dialog ' aria-labelledby=' myModalLabel ' aria-hidden=' true ' div class=' modal-dialog ' div class=' m Odal-content ' br//title div class=' modal-header ' Button type=' Button ' class=' close ' data-miss=' modal ' aria-hidden=' true/Button H4 class=' modal-title ' id=' myModalLabel ' date selection/H4//去哪儿最后一部分div class=' modal-footer ' Button type=' Button ' class=' btnbtn-default ' data-miss=' modal ' close/Button Button type=' Button ' class=' btnbtn-primary ' ID=' sure ' OK/Button//OK Button也要加上事件，所以要给一个名称/div /div！ - /.模态-内容- /div！-/.modal-/div (3)考虑如何显示这个弹出框。

单击显示日期的文本框，然后弹出选择框，因此您应该为文本框设置事件

$('#riqi ')。单击(function(){ $('#myModal ')。情态(' show ')；//bootstrap直接提示弹出窗口怎么显示，直接拿来用就行了})看效果：

(4)编写jQuery页面：年、月、日的方法其实和js的编写很相似，就是风格和赋值方式和js有点不一样，没有其他需要注意的地方

当然，在编写了jQuery方法之后，记得在使用它的时候调用它

jQuery页面中的年、月、日的方法和js中的逻辑是一样的(不多说)

//load year函数load nian(){ var date=new date；//取当前时间和年份var year=date.getFullYear()像js；var str=for(var I=第5年；iyear 6；I) {br //判断当年是否选择了(I==year){ str=' option selected=' selected ' value=' I ' ' I '/option '；} else { str=' option value=' I ' ' ' I '/option '；} } $('#nian ')。html(字符串)；//它还将值写入年下拉列表}//Load month函数Load yue(){ br//js中的月的逻辑与var date=new Date相同；var yue=date . getmonth()1；//获取当月的var str=for(var I=1；i13I) {br //判断当月是否选择了(I==yue){ str=' option selected=' selected ' value=' I ' ' I '/option '；} else { str=' option value=' I ' ' ' I '/option '；} } $('#yue ')。html(字符串)；}//load day function load day(){ br//js中的逻辑与var date=new Date相同；var Tian=date . getdate()；//得到var zs=31的天数；//总天数var nian=$('#nian ')。val()；//获取year var yue=$('#yue ')的值。val()；//获取month的值brbr //如果(yue==4 | | yue==6 | | yue==9 | | yue==11){ zs=30；} else if(yue==2) {br //判断if ((nian% 4==0nian0！=0)| | nian @ 0==0){ zs=29；} else { zs=28} } var str=for(var I=1；izs 1；I) {br //判断天是否选择了(I==田){ str=' option selected=' selected ' value=' I ' ' I '/option '；} else { str=' option value=' I ' ' ' I '/option '；} } $('#tian ')。html(字符串)；}最后一件事是选择哪一年，接下来的月和日会有变化，所以有必要写在开头

$(文档)。ready(函数(e) {$ ('# nian '))。change(function(){//选择年来更改日LoadTian()；}) $ ('# yue ')。change(function(){//选择月来更改日LoadTian()；})});(5)将选定的日期值传递到文本框中

$(' #确定')。单击(function(){ var nian=$('#nian '))。val()；//获取year var yue=$('#yue ')的值。val()；//获取month var tian=$('#tian ')的值。val()；//获取days var str=nian '-'悦'-' tian的值；//拼接后的字符串显示$(“# riqi”)。val(字符串)；//将值放入riqi $(“# myModal”)的文本框中。modal('hide') //关闭弹出窗口})这样选择器就结束了。看整体效果：

单击文本框弹出日期选择框

选择一个日期，然后单击确定

此外：除了日期之外，还可以添加默认时间

$(' #确定')。单击(function(){ var nian=$('#nian '))。val()；//获取year var yue=$('#yue ')的值。val()；//获取month var tian=$('#tian ')的值。val()；//获取天数var d=new Date()的值；var str=nian '-' yue '-' Tian ' ' d . gethours()' : ' d . getminutes()' : ' d . getdate()；//拼接后的字符串显示年、月、日，时间$(' #日气')。val(字符串)；//将值放入riqi $(“# myModal”)的文本框中。莫代尔(' hide') //关闭弹出窗口})选择效果，默认自动显示以下时间：

日期选择器的两种方法都可以使用。

摘要

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。