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


Posted in Javascript onApril 07, 2016

本文实例为大家分享了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实战教程

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

Javascript 相关文章推荐
js 目录列举函数
Nov 06 Javascript
JavaScript关于select的相关操作说明
Jan 13 Javascript
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
微信小程序 form组件详解
Oct 25 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
原生js制作日历控件实例分享
Apr 06 #Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 #Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 #Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 #Javascript
jQuery隐藏和显示效果实现
Apr 06 #Javascript
JS动态改变浏览器标题的方法
Apr 06 #Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 #Javascript
You might like
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
详解react-redux插件入门
2018/04/19 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
vue中路由跳转不计入history的操作
2020/09/21 Javascript
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
python抽象基类用法实例分析
2015/06/04 Python
python 自动重连wifi windows的方法
2018/12/18 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
Python os模块常用方法和属性总结
2020/02/20 Python
如何编写python的daemon程序
2021/01/07 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
如何使用PHP session
2015/04/21 面试题
军训的自我鉴定
2013/12/10 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
丧事答谢词
2015/01/05 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers