前言

所谓日期选择是在下拉列表中选择年、月、日，年显示前后的五年，12个月，日就是有30、31、29、28天的区别，随着月份的变而变，本文介绍了利用Query+bootstrap和js实现日期选择器的两种方法，下面来一起学习学习吧。

一、js方式的日期选择

（1）首先就是三个下拉列表了，点击年、月、日显示列表中的内容，这样就是要给这三个列表加“点击事件”onclick

<select id="nian" onclick="biantian()"></select>年
<select id="yue" onclick="biantian()"></select>月
<select id="tian"></select>日

也就是这样的效果：

（2）写js方法

注意：年月日三个选择框，那么就是要写三个方法

填充年的方法

function FillNian()
{
　　var b = new Date(); //取当前时间
　　var nian = parseInt(b.getFullYear()); //取当前年份
 
　　var str = "";
 
　　for(var i=nian-5;i<nian+6;i++) //显示前后的5年
　　{<br>　　　　//判断年的当前选中，选中当前的年份
　　　　if( i==nian)
　　　　{
　　　　　　str = str+"<option selected='selected' value='"+i+"' >"+i+"</option>";
　　　　}
　　　　else
　　　　{
　　　　　　str = str+"<option value='"+i+"'>"+i+"</option>";
　　　　}
　　}
　　//给id名是nian的下拉菜单中加添加html，html就是上面写到的str
　　document.getElementById("nian").innerHTML = str;
}

写完了年方法，记得调用一下，查看效果如下：　　

（3）填充月的方法：这个和年的也是差不多，没有什么大的变化

function FillYue()
{
　　var b = new Date(); //取当前时间
 var yue = parseInt(b.getMonth()+1); //取当前月份
 
 var str = "";
 for(var i=1;i<13;i++) //循环；月份是从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）填充天的方法：和年和月的差不多，不一样的就是月份不一样，天数也是不一样的

function FillTian()
{
 var b = new Date();
 var tian = parseInt(b.getDate()); //获取当前天数
 
 var yue = document.getElementById("yue").value; //找到月的值
 var nian = document.getElementById("nian").value; //找到年的值
 var ts = 31;
 
 //30号的月数：月数是4、6、9、11时，天数是30天
 if(yue==4 || yue==6 || yue==9 || yue==11)
 {
 ts=30;
 }
 
 //2月不同年的天
 if(yue==2)
 {<br>　　　　　//被4整除，同时不被100整除；或是被400整除的年
 if((nian%4==0 && nian%100 != 0) || nian%400==0)
 {
 ts = 29; //闰年
 }
 else
 {
 ts = 28; //平年
 }
 }
 
 var str = "";
 for(var i=1;i<ts+1;i++)
 {<br>　　　　　//判断天数是否选中
 if( i==tian)
 {
 str = str+"<option selected='selected' value='"+i+"' >"+i+"</option>";
 }
 else
 {
 str = str+"<option value='"+i+"'>"+i+"</option>";
 }
 }
 document.getElementById("tian").innerHTML = str; //将str的值给id名是天的下拉列表
}

写完了日的方法，记得调用一下，查看整体效果如下：　

闰年如下：

二、Query+bootstrap的日期选择器

想用jQuery和bootstrap，必须引入这两个的包

<script src="../jquery-1.11.2.min.js"></script>
<script src="../dist/js/bootstrap.min.js"></script>
<script src="riqishijian.js"></script>
<link href="../dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

进入正题：点击文本框会弹出个日期选择的窗口，所以

（1）写个提示字，并且写个文本框

<input type="text" id="riqi" /> //最终显示的日期时间的地方，文本框起个名字对其加事件

（2）写bootstrap的模态框，直接引用就可以

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content"><br>　　　　　　　//标题部分
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title" id="myModalLabel">日期选择</h4> //显示标题的地方
   </div><br>　　　　　　　//主体部分
   <div class="modal-body">
    <select id="nian"> //年的下拉列表
    </select>
    <select id="yue"> //月的下拉列表
    </select>
    <select id="tian"> //天的下拉列表
    </select>
   </div><br>　　　　　　　//最后部分
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    <button type="button" class="btn btn-primary" id="sure">确定</button> //确定按钮也要是加事件的，所以也要起个名字
   </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal -->
</div>

（3）考虑下怎么显示这个弹出框？

单击显示日期的文本框再弹出选择框，那么就要对文本框设置事件

$("#riqi").click(function(){
 $('#myModal').modal('show'); //bootstrap直接提示怎么显示弹窗，直接拿过来用就可以 
})

看下效果：

（4）写jQuery页面：年月日的方法其实和js的写法差不多，就是样式和取赋方式和js有点区别，其他的没有什么可以注意的

当然，写完了jQuery方法，记得用的时候调用一下

jQuery页面中的年、月、日的方法：和js中的逻辑都是一样的（不多说）

//加载年份
function LoadNian()
{
 var date=new Date; //和js的方法一样取当前时间和年份
 var year=date.getFullYear();
  
 var str = "";
  
 for(var i=year-5;i<year+6;i++)
 {<br>　　　　　　　　　//判断当前年是否选中
  if(i==year)
  {
  　　str +="<option selected='selected' value='"+i+"'>"+i+"</option>";
  }
  else
  {
  　　str +="<option value='"+i+"'>"+i+"</option>";
  }
 }
  
 $("#nian").html(str); //也是将值写到年的下拉列表中
}

//加载月份
function LoadYue()
{<br>　　　　　//和js中的月份的逻辑都是一样的
 var date=new Date;
 var yue=date.getMonth()+1; //取到当前月份
  
 var str = "";
  
 for(var i=1;i<13;i++)
 {<br>　　　　　　　　　//判断月份是否选中
  if(i==yue)
  {
  　　str +="<option selected='selected' value='"+i+"'>"+i+"</option>";
  }
  else
  {
  　　str +="<option value='"+i+"'>"+i+"</option>";
  }
 }
 $("#yue").html(str);
}

//加载天
function LoadTian()
{<br>　　　　　//和js中的逻辑是一样的
 var date=new Date;
 var tian = date.getDate(); //取到天数
  
 var zs = 31; //总天数
 var nian = $("#nian").val(); //取到年的值
 var yue = $("#yue").val(); //取到月的值<br><br>　　　　　//也是天数是30天的月份
 if(yue == 4 || yue==6 || yue==9 || yue==11)
 {
 　　zs = 30;
 }
 else if(yue==2)
 {<br>　　　　　　　　　//判断闰月的
  if((nian%4==0 && nian%100 !=0) || nian%400==0)
  {
  　　zs = 29;
  }
  else
  {
  　　zs = 28;
  }
 }
  
 var str = "";
  
 for(var i=1;i<zs+1;i++)
 {<br>　　　　　　　　　//判断天数是否选中
  if(i==tian)
  {
   str +="<option selected='selected' value='"+i+"'>"+i+"</option>";
  }
  else
  {
   str +="<option value='"+i+"'>"+i+"</option>";
  }
 }
  
 $("#tian").html(str);
  
}

最后就是要选择哪一年，后面的月和日都要变，那么就要在最开始写

$(document).ready(function(e) {
 $("#nian").change(function(){ //选年改变天
  　　LoadTian();
  })
 $("#yue").change(function(){ //选月改变天
  　　LoadTian();
  })
});

（5）把选中的年月日的值传入文本框中

$("#sure").click(function(){
 var nian = $("#nian").val(); //取到年的值
 var yue = $("#yue").val(); //取到月份的值
 var tian = $("#tian").val(); //取到天数的值
   
 var str = nian+"-"+yue+"-"+tian; //拼接字符串显示年月日
 $("#riqi").val(str); //将值放到riqi的文本框中
 $('#myModal').modal('hide') //将弹窗关闭
})

这样选择器就结束了，看下整体效果：

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

选择一个日期，单击确定按钮

另外：也可以除了日期，也可以加上默认时间

$("#sure").click(function(){
 var nian = $("#nian").val(); //取到年的值
 var yue = $("#yue").val(); //取到月份的值
 var tian = $("#tian").val(); //取到天数的值
 
 var d = new Date();
 var str = nian+"-"+yue+"-"+tian+" "+d.getHours()+":"+d.getMinutes()+":"+d.getDate() ; //拼接字符串显示年月日，还有时间
 $("#riqi").val(str); //将值放到riqi的文本框中
 $('#myModal').modal('hide') //将弹窗关闭
})

选择效果，后面的时间是自动默认显示的：

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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

# bootstrap  # 日期选择器  # js原生日期选择器  # 月份选择器  # Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析  # bootstrap table之通用方法（ 时间控件  # 导出  # 动态下拉框  # 表单验证  # 选中与获取信息）代码分享  # BootStrap表单时间选择器详解  # 文本框  # 弹出  # 写到  # 选择器  # 单击  # 框中  # 列表中  # 两种  # 没有什么  # 加载  # 个月  # 是一样的  # 就可以  # 是在  # 是有  # 都要  # 也就  # 也要  # 是这样  # 其他的 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 网站制作大概要多少钱一个,做一个平台网站大概多少钱？  laravel怎么使用数据库工厂（Factory）生成带有关联模型的数据_laravel Factory生成关联数据方法  如何快速辨别茅台真假？关键步骤解析  EditPlus 正则表达式 实战(3)  Laravel广播系统如何实现实时通信_Laravel Reverb与WebSockets实战教程  高防服务器如何保障网站安全无虞？  移动端脚本框架Hammer.js  如何在IIS管理器中快速创建并配置网站？  linux写shell需要注意的问题(必看)  INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】  如何登录建站主机？访问步骤全解析  Laravel怎么实现观察者模式Observer_Laravel模型事件监听与解耦开发【指南】  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  如何正确选择百度移动适配建站域名？  如何做网站制作流程,*游戏网站怎么搭建？  javascript中数组（Array)对象和字符串（String)对象的常用方法总结  python中快速进行多个字符替换的方法小结  Win11怎么关闭专注助手 Win11关闭免打扰模式设置【操作】  JavaScript数据类型有哪些_如何准确判断一个变量的类型  手机软键盘弹出时影响布局的解决方法  Laravel观察者模式如何使用_Laravel Model Observer配置  通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】  Bootstrap整体框架之CSS12栅格系统  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  EditPlus中的正则表达式 实战(4)  laravel怎么在请求结束后执行任务（Terminable Middleware）_laravel Terminable Middleware请求结束任务执行方法  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站？  如何快速搭建高效香港服务器网站？  如何在IIS中新建站点并配置端口与物理路径？  焦点电影公司作品,电影焦点结局是什么？  Laravel如何使用Blade组件和插槽？（Component代码示例）  Laravel如何编写单元测试和功能测试？（PHPUnit示例）  Laravel怎么定时执行任务_Laravel任务调度器Schedule配置与Cron设置【教程】  简历没回改：利用AI润色让你的文字更专业  网页制作模板网站推荐,网页设计海报之类的素材哪里好？  如何在IIS中配置站点IP、端口及主机头？  Win11关机界面怎么改_Win11自定义关机画面设置【工具】  如何快速生成高效建站系统源代码？  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  jQuery 常见小例汇总  Laravel中DTO是什么概念_在Laravel项目中使用数据传输对象(DTO)  如何有效防御Web建站篡改攻击？  高性能网站服务器部署指南：稳定运行与安全配置优化方案  Chrome浏览器标签页分组怎么用_谷歌浏览器整理标签页技巧【效率】  郑州企业网站制作公司,郑州招聘网站有哪些？  ai格式如何转html_将AI设计稿转换为HTML页面流程【页面】  Laravel storage目录权限问题_Laravel文件写入权限设置  Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复  Midjourney怎样加参数调细节_Midjourney参数调整技巧【指南】  青岛网站建设如何选择本地服务器？