原生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 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
ASP SQL防注入的方法
Dec 25 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
JS实现随机点名器
Apr 12 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
Javascript实现的分页函数
2007/02/07 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
浅谈用VSCode写python的正确姿势
2017/12/16 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
python开启debug模式的方法
2019/06/27 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
党的群众教育实践活动实施方案
2014/06/12 职场文书
公司应聘求职信
2014/06/21 职场文书
关于环保的活动方案
2014/08/25 职场文书
安全检查汇报材料
2014/12/26 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis
实例详解Python的进程,线程和协程
2022/03/13 Python
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js
Redis实现一个账号只能登录一个设备
2022/04/19 Redis
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL