原生JS日期联动效果

浏览：730次- 评论：0次- 发布时间：2018-08-14

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

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

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

调用说明

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

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取