原生JS与jQuery+Bootstrap实现日期选择器的两种方案

作者：青柠时间：2026-10-21 20:03:06浏览：136

本文详细讲解如何利用原生JavaScript和jQuery结合Bootstrap两种方式实现前端日期选择器。原生JS方案通过操作DOM元素构建年、月、日三级联动下拉框，并处理闰年逻辑；jQuery方案则利用Bootstrap模态框封装交互界面，通过事件绑定实现日期选取与回显。两种方法均涵盖核心代码逻辑与实现步骤，供开发者根据项目需求选择。

前言

日期选择器的核心功能是从下拉列表中选取年、月、日。其中，年份显示范围通常包含当前年前后各五年，月份固定为12个月，而天数则根据所选月份动态变化，包括30天、31天、29天或28天。本文将介绍两种实现日期选择器的方法：一种基于原生JavaScript，另一种基于jQuery配合Bootstrap框架。

原生JavaScript实现日期选择

一、原生JavaScript实现日期选择

首先，需要创建三个下拉列表分别对应年、月、日。为了在用户点击时显示列表内容，需为这三个下拉列表添加“点击事件”onclick。


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

实现效果如下：

原生JavaScript实现日期选择

接下来编写JavaScript方法。

由于涉及年、月、日三个选择框，需要分别编写对应的处理方法。

首先是填充年份的方法。


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;
}

完成年份方法后，记得调用该方法以查看效果，结果如下：

原生JavaScript实现日期选择

其次是填充月份的方法，其逻辑与年份填充类似，无明显差异。


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的下拉列表中
}

完成月份方法后，记得调用该方法以查看效果，结果如下：

原生JavaScript实现日期选择

最后是填充天数的方法，与年和月的逻辑相似，但需根据月份不同动态计算天数。


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名是天的下拉列表
}

完成天数方法后，记得调用该方法以查看整体效果，结果如下：

原生JavaScript实现日期选择　

闰年判断逻辑如下：

原生JavaScript实现日期选择

jQuery与Bootstrap实现日期选择

二、jQuery与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" />

具体实现：点击文本框会弹出一个日期选择窗口，因此需要处理相关事件。

首先，编写提示文字并创建一个文本框。


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

其次，使用Bootstrap的模态框（Modal）组件，直接引用即可。


<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>

接下来考虑如何显示弹出框。

当用户单击显示日期的文本框时，需触发弹出选择框的事件，因此需对文本框设置事件监听。


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

查看效果如下：

原生JavaScript实现日期选择

编写jQuery页面逻辑：年、月、日的方法与原生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();
  })
});

将选中的年、月、日值传入文本框中。


$("#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') //将弹窗关闭
})

至此，选择器功能完成，查看整体效果：

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

原生JavaScript实现日期选择

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

原生JavaScript实现日期选择

此外，除了日期选择，还可以添加默认时间显示。


$("#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') //将弹窗关闭
})

选择效果如下，后续时间会自动默认显示：

原生JavaScript实现日期选择

上述两种日期选择器方法均可使用。

总结

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

作者最新文章

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53

JavaScript新手常犯的编码错误与最佳实践指南

2026-11-04 22:12:38