原生js实现日期联动


Posted in Javascript onJanuary 12, 2015

月份的判定,由于涉及到过多了判定条件,如果用if else会大大降低性能,建议用switch 语法

代码如下:

 getDays:function(year,month){

         // var aDay = [31,28|29,31,30,31,30,31,31,30,31,30,31];

        // 二月份的天数数据处理

        var FedDays = year%4==0?29:28,

            returnDays = '';

        var month = month<10?month = '0'+month:month.toString();

        switch(month){

            case '01':

            case '03':

            case '05':

            case '07':

            case '08':

            case '10':

            case '12': returnDays = 31;break;

            case '04':

            case '06':

            case '09':

            case '11': returnDays = 30;break;

            case '02': returnDays = FedDays;break;

        }

        return returnDays;

    }

完整的源代码:

/*  author:laoguoyong

------------------------------

日期三级联动,范围选择

------------------------------

参数

* [String] targets:'#year,#month,#day' ;年,月,日的id

* [String] range:'2013-02-03,2019-09-21';范围,正确格式为xxxx-xx-xx

----为了节省代码,请传入正确的日期范围参数

----错误示范:

  (1)range:'2013-02-03,2019-9-21' 是不对的,注意日期格式

  (2)range:'2013-02-03' 是不对的,请输入完整的范围之值

  (3)range:'2013-02-03,2016-02-30' 是不对的,2月没有30天

  (3)range:'2013-02-03,2011-02-30' 是不对的,范围错误了

*

*/

function GySetDate(opt){

    //elem

    var targets = opt.targets.split(',');

    this.eYear = this.getId(targets[0].slice(1));

    this.eMonth = this.getId(targets[1].slice(1));

    this.eDay = this.getId(targets[2].slice(1));

    if(!this.eYear||!this.eMonth||!this.eDay) return;

    //范围值

    var r = opt.range.indexOf(','),

        aStarts = opt.range.slice(0,r).split('-'), // 转为:['2013','05','20']

        aEnds = opt.range.slice(r+1,opt.range.length).split('-'); // 转为:['2018','08','20']

    //Number类型

    this.startYear = parseInt(aStarts[0],10);

    this.startMonth = parseInt(aStarts[1],10);

    this.startDay = parseInt(aStarts[2],10);

    this.endYear = parseInt(aEnds[0],10);

    this.endMonth = parseInt(aEnds[1],10);

    this.endDay = parseInt(aEnds[2],10);
    this.init();

}

GySetDate.prototype = {

    init:function(){

        var _that = this;

        // 初始化日期

        this.setYears({'start':this.startYear,'end':this.endYear});

        this.setMonths({'start':this.startMonth});

        this.setDays({'year':this.startYear,'month':this.startMonth,'start':this.startDay});

        // 年选择

        this.eYear.onchange = function(){

            var year = parseInt(this.value);

            switch(true){

                case (year == _that.startYear):{

                    _that.setMonths({'start':_that.startMonth});

                    _that.setDays({'year':_that.startYear,'month':_that.startMonth,'start':_that.startDay});

                };break;

                case (year == _that.endYear):{

                    _that.setMonths({'start':1,'end':_that.endMonth});

                    if(_that.endMonth>1){

                        _that.setDays({'year':_that.endYear,'month':1,'start':1});    

                    }else{

                        _that.setDays({'year':_that.endYear,'month':1,'start':1,'end':_that.endDay});

                    }

                };break;

                default:{

                    _that.setMonths({'start':1});

                    _that.setDays({'start':1,'year':year,'month':1});

                }

            }

            

        }

        // 月选择

        this.eMonth.onchange = function(){

            var year = parseInt(_that.eYear.options[_that.eYear.selectedIndex].value),

                month = parseInt(this.value);

            switch(true){

                case (year==_that.endYear&&month==_that.endMonth):{

                    _that.setDays({'start':1,'year':year,'month':month,'end':_that.endDay});

                };break;

                case (year==_that.startYear&&month==_that.startMonth):{

                    _that.setDays({'year':_that.startYear,'month':_that.startMonth,'start':_that.startDay});

                };break;

                default:{

                    _that.setDays({'start':1,'year':year,'month':month});

                }

            }    

            

        }

    },

    /*设置年,月,日

    ----------------------------------

    参数值都为Number类型

    */

    // 参数 {'start':xx,'end':xxx}

    setYears:function(opt){

        this.eYear.innerHTML = '';

         for(var n=opt.start;n<=opt.end;n++){

            this.eYear.add(new Option(n,n));

        }

    },

    // 参数 {'start':xx,'end':xxx}

    // 参数 'end' 为可选,忽略,则开始到12月

    setMonths:function(opt){

        this.eMonth.innerHTML = '';

        var months = opt.end || 12;

        for(var n=opt.start;n<=months;n++){

            if(n<10) n = '0'+n;

           this.eMonth.add(new Option(n,n));

        }

    },

    // 参数 {'start':xx,'year':xxx,'month':xx,'star':xx,'end':xxx}

    // 参数 'end' 为可选,忽略,则开始到本月底(根据月份判断的)

    setDays:function(opt){

         this.eDay.innerHTML = '';

         var days = opt.end || this.getDays(opt.year,opt.month);

         for(var n=opt.start;n<=days;n++){

            if(n<10) n = '0'+n;

            this.eDay.add(new Option(n,n));

         }

    },

    /* 根据 年,月,返回正确的天数,如 2016-2,返回是29天(润年)

    --------------------------------------------------------------

    参数值都为Number类型

    */

    getDays:function(year,month){

         // var aDay = [31,28|29,31,30,31,30,31,31,30,31,30,31];

        // 二月份的天数数据处理

        var FedDays = year%4==0?29:28,

            returnDays = '';

        var month = month<10?month = '0'+month:month.toString();

        switch(month){

            case '01':

            case '03':

            case '05':

            case '07':

            case '08':

            case '10':

            case '12': returnDays = 31;break;

            case '04':

            case '06':

            case '09':

            case '11': returnDays = 30;break;

            case '02': returnDays = FedDays;break;

        }

        return returnDays;

    },

    /*工具辅助函数

    ----------------------------------

    */

    getId:function(id){

        return document.getElementById(id);

    }

}

效果展示图:

原生js实现日期联动

效果还不错吧,小伙伴们自己美化下,使用到自己的项目中去吧。

Javascript 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 Javascript
Javascript中innerHTML用法实例分析
Jan 12 #Javascript
js实现从数组里随机获取元素
Jan 12 #Javascript
javascript的tab切换原理与效果实现方法
Jan 10 #Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 #Javascript
js中键盘事件实例简析
Jan 10 #Javascript
js中this的用法实例分析
Jan 10 #Javascript
js创建对象的方式总结
Jan 10 #Javascript
You might like
PHP常用函数小技巧
2008/09/11 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
Javascript 对象的解释
2008/11/24 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
Python龙贝格法求积分实例
2020/02/29 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
中文系学生自荐信范文
2013/11/13 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
高中班级口号
2014/06/09 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
档案管理员岗位职责
2015/02/12 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
2015年材料员工作总结
2015/04/30 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL
关于使用Redisson订阅数问题
2022/01/18 Redis
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python