zoukankan      html  css  js  c++  java
  • 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");
            }
        }
    

      仅供参考,欢迎批评指正!

  • 相关阅读:
    Vue使用watch监听一个对象中的属性
    小程序 显示对话框 确定-取消
    【微信小程序】 wx:if 与 hidden(隐藏元素)区别
    vue项目移植tinymce踩坑
    XMLHttpRequest.withCredentials 解决跨域请求头无Cookie的问题
    appJSON["window"]["navigationBarTextStyle"] 字段需为 black 或 white
    Java写 插入 选择 冒泡 快排
    编码表理解
    Centos yum安装java jdk1.8
    Java Hibernate和.Net EntityFramework 如何在提交事务之前 就拿到需要新增实体的Id
  • 原文地址:https://www.cnblogs.com/roychenyi/p/5361489.html
Copyright © 2011-2022 走看看