基于javascript bootstrap实现生日日期联动选择

更新时间：2016年04月07日 08:44:43 作者：roychenyi

这篇文章主要介绍了基于javascript bootstrap实现生日日期联动选择的相关资料,需要的朋友可以参考下

本文实例为大家分享了js实现日期联动选择的相关代码，适用于生日的选择，供大家参考，具体内容如下

实现目标：年月日三个select 输入框，以及一个hidden的input，通过js获取input的值，如果有值切是日期格式，年月日select为input中的时间。否则为空。年默认区间段为1900年到当今年份

本人使用了bootstrap，class请参照bootstrap的相关说明

下面是html 内容：

<div class="col-sm-9">
     <label class="checkbox-inline">
      <select node-type="birthday_year" name="birthday_y" id="birthday_y">
      <option value=""></option>
 
      </select><span>年</span>
     </label>
     <label class="checkbox-inline">
      <select node-type="birthday_month" name="birthday_m" id="birthday_m">
      <option value=""></option>
 
      </select><span>月</span>
     </label>
     <label class="checkbox-inline">
      <select node-type="birthday_month" name="birthday_d" id="birthday_d">
      <option value=""></option>
 
      </select><span>日</span>
     </label>
     <input type="hidden" name="birth" id="birth" value="2016/2/12">
     <label class='checkbox-inline text-warning hidden' id="birth_error_info"><i class='fa fa-warning'>请输入完整生日</i></label>
     </div>

下面是js 的实现：

//设置生日的转换和获取
 
 
 var date=new Date();
 var year=date.getFullYear();
 for(var i=year;i>=1900;i--){
 $("#birthday_y").append("<option value="+i+" label="+i+">"+i+"</option>");
 }
 
 
 
 
 $('#birthday_y').change(function(){
 var birth_year=$('#birthday_y').val();
 if(birth_year!=""){
  var birth_month=$('#birthday_m').val();
  if(birth_month!=""){
  if(birth_month=="2"){
   if((birth_year%4==0 && birth_year%100!=0) || (birth_year%400==0)){
   $("#birthday_d").append("<option value=" + 29 + " label=" + 29 + ">" + 29 + "</option>");
   }else{
   $("#birthday_d option[value='29']").remove();
   }
  }
  }else {
  for (var i = 1; i <= 12; i++) {
   $("#birthday_m").append("<option value=" + i + " label=" + i + ">" + i + "</option>");
  }
  }
 }else{
  $("#birthday_m").html("<option value=''></option>");
  $("#birthday_d").html("<option value=''></option>");
 }
 checkBirthday();
 });
 $('#birthday_m').change(function(){
 var birth_year=$('#birthday_y').val();
 var birth_month=this.value;
 var birth_day=$('#birthday_d').val();
 if(birth_month!=""){
  switch (birth_month){
  case "1":case "3":case "5":case "7":case "8":case "10":case "12":
  if(birth_day=="") {
   $("#birthday_d").empty();
   $("#birthday_d").append("<option value='' ></option>");
   for (var i = 1; i <= 31; i++) {
   $("#birthday_d").append("<option value=" + i + " label=" + i + ">" + i + "</option>");
   }
  }else {
   switch ($("#birthday_d option:last").attr("value")){
   case "28":$("#birthday_d").append("<option value=" + 29 + " >" + 29 + "</option>");
   case "29":$("#birthday_d").append("<option value=" + 30 + " >" + 30 + "</option>");
    $("#birthday_d").append("<option value=" + 31 + " >" + 31 + "</option>");break;
   case "30":$("#birthday_d").append("<option value=" + 31 + " >" + 31 + "</option>");
    break;
   default :break;
 
   }
  }
  break;
  case "4":case "6":case "9": case "11":
  if(birth_day=="") {
   $("#birthday_d").empty();
   $("#birthday_d").append("<option value='' ></option>");
   for (var i = 1; i <= 30; i++) {
   $("#birthday_d").append("<option value=" + i + " label=" + i + ">" + i + "</option>");
   }
  }else{
   switch ($("#birthday_d option:last").attr("value")){
   case "28":$("#birthday_d").append("<option value=" + 29 + " >" + 29 + "</option>");
   case "29":$("#birthday_d").append("<option value=" + 30 + " >" + 30 + "</option>");
   case "31":$("#birthday_d option[value='31']").remove();
    break;
   default :break;
 
   }
  }
  break;
  case "2":
   if(birth_day==""){
   if((birth_year%4==0 && birth_year%100!=0) || (birth_year%400==0)){
    for(var i=1;i<=29;i++){
    $("#birthday_d").append("<option value="+i+" label="+i+">"+i+"</option>");
    }
   }else{
    for(var i=1;i<=28;i++){
    $("#birthday_d").append("<option value="+i+" label="+i+">"+i+"</option>");
    }
   }}else{
   $("#birthday_d option[value='31']").remove();
   $("#birthday_d option[value='30']").remove();
   if((birth_year%4==0 && birth_year%100!=0) || (birth_year%400==0)){
 
   }else{
    $("#birthday_d option[value='29']").remove();
   }
   }
   break;
  default :break;
  }
 
 
 }
 checkBirthday();
 });
 
 $('#birthday_d').change(function() {
  checkBirthday();
 }
 );
 $('#birthday_d').focus(
 function(){
  if($('#birthday_m').val()==""){
  $("#birthday_d").empty();
  $("#birthday_d").append("<option value='' ></option>");
  }
 }
 );
 
 //根据后台提供的数据，填充用户的值
 var birth_value=$('#birth').val();
 if(birth_value!="") {
 var date1 = new Date(birth_value);
 var b_year=date1.getFullYear();
 var b_month=date1.getMonth()+1;
 var b_day=date1.getDate();
 $("#birthday_y").find("option[value='"+b_year+"']").attr("selected","selected");
 if($('#birthday_y').val()!="") {
  for (var i = 1; i <= 12; i++) {
  $("#birthday_m").append("<option value=" + i + " label=" + i + ">" + i + "</option>");
  }
 }
 $("#birthday_m").find("option[value='"+b_month+"']").attr("selected","selected");
 switch (b_month){
  case 1:case 3:case 5:case 7:case 8:case 10:case 12:
  for (var i = 1; i <= 31; i++) {
  $("#birthday_d").append("<option value=" + i + " label=" + i + ">" + i + "</option>");
  }
  break;
  case 4:case 6:case 9: case 11:
 
  $("#birthday_d").append("<option value='' ></option>");
  for (var i = 1; i <= 30; i++) {
  $("#birthday_d").append("<option value=" + i + " label=" + i + ">" + i + "</option>");
  }
  break;
  case 2:
  if((b_year%4==0 && b_year%100!=0) || (b_year%400==0)){
   for(var i=1;i<=29;i++){
   $("#birthday_d").append("<option value="+i+" label="+i+">"+i+"</option>");
   }
  }else{
   for(var i=1;i<=28;i++){
   $("#birthday_d").append("<option value="+i+" label="+i+">"+i+"</option>");
   }
  }
  break;
  default :break;
 }
 $("#birthday_d").find("option[value='"+b_day+"']").attr("selected","selected");
 }
 
//验证生日是否输入完整
 function checkBirthday(){
 var b_year= $('#birthday_y').val();
 var b_month=$('#birthday_m').val();
 var b_day=$('#birthday_d').val();
 if(b_year!=""&&b_month!=""&&b_day!=""){
  $('#birth').val(b_year+"-"+b_month+"-"+b_day);
  $('#birth_error_info').addClass("hidden");
 }else{
  $('#birth').val("");
  $('#birth_error_info').removeClass("hidden");
 }
 }

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助。

您可能感兴趣的文章:

JS如何设置滚动属性默认自动滚动到底部(overflow:scroll;)
这篇文章主要给大家介绍了关于JS如何设置滚动属性默认自动滚动到底部(overflow:scroll;)的相关资料,通过本文介绍的的JavaScript代码示例,你可以实现滚动条默认在最底部的效果,需要的朋友可以参考下
2023-10-10
详解ES6 系列之异步处理实战
这篇文章主要介绍了详解ES6 系列之异步处理实战，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
zTree实现节点修改的实时刷新功能
在实际应用中会遇到动态操作树各节点的需求，在增加树节点后如何实时动态刷新树就十分有必要了。这篇文章主要介绍了zTree实现节点修改的实时刷新功能,需要的朋友可以参考下
2017-03-03
layui实现数据表格自定义数据项
今天小编就为大家分享一篇layui实现数据表格自定义数据项，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
使用Mock.js生成前端测试数据
这篇文章主要介绍了使用Mock.js生成前端测试数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
交叉观察器 IntersectionObserver用法详解
这篇文章主要为大家介绍了交叉观察器 IntersectionObserver用法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
关于Bootstrap按钮组件消除黄框的方法
这篇文章主要介绍了Bootstrap按钮组件消除黄框的方法,需要的朋友可以参考下
2017-05-05
一文带你理解JavaScript 观察者模式
观察者模式（Observer Pattern）是一种行为型设计模式，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象，本文将带你详细了解JavaScript 观察者模式，,需要的朋友可以参考下
2023-05-05
使用JavaScript实现小球按照贝塞尔曲线运动
要在 JavaScript 中实现一个按照贝塞尔曲线运动的小球,关键是要掌握贝塞尔公式的基本原理和实现方式,以及使用 JavaScript 处理动画和物理运算,感兴趣的小伙伴跟着小编一起来看看吧
2024-10-10
原生JS实现圣旨卷轴展开效果
本文主要介绍了原生JS实现诏书卷轴展开效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03

基于javascript bootstrap实现生日日期联动选择

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具