原生JS日期联动（原创）

Html

Css

function Ymd(yid, mid, did) {
    this.year = document.getElementById(yid);
    this.month = document.getElementById(mid);
    this.day = document.getElementById(did);
    this.minYear = 1900; //从1900年开始，可自己设定
    this.maxYear = (new Date).getFullYear(); //从当前年份结束，可自己设定
    this.now_year = null; //选中年
    this.now_month = null; //选中月

//dy默认年//dm默认月//dd默认日
    this.run = function(dy, dm, dd) {
        var _this = this;
        if (dy) {
            this.now_year = dy;
        }
        if (dm) {
            this.now_month = dm;
        }
        this.year_select(dy, dm, dd);
        this.year.addEventListener('change',
            function() {
                _this.now_year = this.value;
                _this.month_select();
            }, false);
        this.month.addEventListener('change',
            function() {
                _this.now_month = this.value;
                _this.day_select();
            }, false);
    };

this.year_select = function(dy, dm, dd) {
        var option_str = this.assembleOption(dy, this.minYear, this.maxYear, 0);
        this.year.innerHTML = option_str;
        this.month_select(dm, dd);
    };

this.month_select = function(dm, dd) {
        var option_str = this.assembleOption(dm, 1, 12, 1);
        this.month.innerHTML = option_str;
        this.day_select(dd);
    };

this.day_select = function(dd) {
        var day_num = 0;
        if (this.now_month == 1 || this.now_month == 3 || this.now_month == 5 || this.now_month == 7 || this.now_month == 8 || this.now_month == 10 || this.now_month == 12) {
            day_num = 31;
        } else if (this.now_month == 4 || this.now_month == 6 || this.now_month == 9 || this.now_month == 11) {
            day_num = 30;
        } else if (this.now_month == 2) {
            if ((this.now_year % 4 == 0 && this.now_year % 100 != 0) || (this.now_year % 400 == 0)) {
                day_num = 29;
            } else {
                day_num = 28;
            }
        }
        var option_str = this.assembleOption(dd, 1, day_num, 2);
        this.day.innerHTML = option_str;
    };

this.assembleOption = function(def, min, max, type) {
        var typeArr = ['年份', '月份', '日期'];
        var option = '<option value="">请选择' + typeArr[type] + '</option>';
        if (0 === type) {
            for (var i = max; i >= min; i--) {
                var sel = def === i ? 'selected' : '';
                option += '<option ' + sel + ' value="' + i + '">' + i + '</option>';
            }
        } else {
            for (var i = min; i <= max; i++) {
                var sel = def === i ? 'selected' : '';
                option += '<option ' + sel + ' value="' + i + '">' + i + '</option>';
            }
        }
        return option;
    };
}

var call = new Ymd('year', 'month', 'day'); //select标签ID
call.run(1992, 12, 9); //默认值

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

原生JS日期联动（原创）

代码描述：写后后的时候需要一个日期选择，就只是简单的日期选择来JQ22竟然没找到满意的，大家都做的很好可是我要不了那么复杂，所以自己写了一个不需要jquery

调用说明
var call = new ymd('year','month','day'); //传入select标签id并new一个实例 call.run(1992,12,9); //实例运行，可传入默认选中日期，不传也可以

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

CodeFire

相关代码

原生JS日期联动（原创）

最新