加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-18 00:57:09 所属栏目:安全 来源:网络整理
导读:本文实例为大家分享了js实现日期联动选择的相关代码,适用于生日的选择,供大家参考,具体内容如下 实现目标:年月日三个select 输入框,以及一个hidden的input,通过js获取input的值,如果有值切是日期格式,年月日select为input中的时间。否则为空。年默认

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

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

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

下面是html 内容:

  </select><span>年</span>
 </label>
 <label class="checkbox-inline"&gt;
  <select node-type="birthday_month" name="birthday_m" id="birthday_m"&gt;
  <option value=""&gt;</option>

  </select><span>月</span>
 </label>
 <label class="checkbox-inline"&gt;
  <select node-type="birthday_month" name="birthday_d" id="birthday_d"&gt;
  <option value=""&gt;</option>

  </select><span>日</span>
 </label>
 <input type="hidden" name="birth" id="birth" value="2016/2/12"&gt;
 <label class='checkbox-inline text-warning hidden' id="birth_error_info"&gt;<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+"");
}

$('#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 + "");
}else{
$("#birthday_d option[value='29']").remove();
}
}
}else {
for (var i = 1; i <= 12; i++) {
$("#birthday_m").append("<option value=" + i + " label=" + i + ">" + i + "");
}
}
}else{
$("#birthday_m").html("");
$("#birthday_d").html("");
}
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("");
for (var i = 1; i <= 31; i++) {
$("#birthday_d").append("<option value=" + i + " label=" + i + ">" + i + "");
}
}else {
switch ($("#birthday_d option:last").attr("value")){
case "28":$("#birthday_d").append("");
case "29":$("#birthday_d").append("");
$("#birthday_d").append("");break;
case "30":$("#birthday_d").append("");
break;
default :break;

}
}
break;
case "4":case "6":case "9": case "11":
if(birth_day=="") {
$("#birthday_d").empty();
$("#birthday_d").append("");
for (var i = 1; i <= 30; i++) {
$("#birthday_d").append("<option value=" + i + " label=" + i + ">" + i + "");
}
}else{
switch ($("#birthday_d option:last").attr("value")){
case "28":$("#birthday_d").append("");
case "29":$("#birthday_d").append("");
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+"");
}
}else{
for(var i=1;i<=28;i++){
$("#birthday_d").append("<option value="+i+" label="+i+">"+i+"");
}
}}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("");
}
}
);

//根据后台提供的数据,填充用户的值
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 + "");
}
}
$("#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 + "");
}
break;
case 4:case 6:case 9: case 11:

$("#birthday_d").append("");
for (var i = 1; i <= 30; i++) {
$("#birthday_d").append("<option value=" + i + " label=" + i + ">" + i + "");
}
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+"");
}
}else{
for(var i=1;i<=28;i++){
$("#birthday_d").append("<option value="+i+" label="+i+">"+i+"");
}
}
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");
}
}

如果大家还想深入学习,可以点击进行学习,再为大家附两个精彩的专题:

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读