原生js实现日期联动_javascript技巧

月份的判定,由于涉及到过多了判定条件,如果用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);
    }
}

效果展示图:

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

时间: 2024-10-29 13:56:43

原生js实现日期联动_javascript技巧的相关文章

常用原生js自定义函数总结_javascript技巧

js获取日期函数 //获取当前时间日期 function CurentTime() { var now = new Date(); var year = now.getFullYear(); //年 var month = now.getMonth() + 1; //月 var day = now.getDate(); //日 var hh = now.getHours(); //时 var mm = now.getMinutes(); //分 var clock = year + "-&quo

原生js实现日期联动

 日期联动算是一个比较常见的功能了,随便度娘一下,你就能找到N多代码,今天给大家介绍的是个人比较常用,代码很简洁,高效,这里推挤给大家.     月份的判定,由于涉及到过多了判定条件,如果用if else会大大降低性能,建议用switch 语法 代码如下:   代码如下: getDays:function(year,month){ // var aDay = [31,28|29,31,30,31,30,31,31,30,31,30,31]; // 二月份的天数数据处理 var FedDays =

瀑布流的实现方式(原生js+jquery+css3)_javascript技巧

前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的...  原生javascript版  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流-javascript</title> <

常用原生JS兼容性写法汇总_javascript技巧

就来总结一下简单的东西 备注:一下的方法都是包裹在一个EventUtil对象里面的,直接采用对象字面量定义方法了... ①添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListener){//检测是否为DOM2级方法 element.addEventListener(type, handler, false); }else if (element.attachEvent){//检测是否为IE级方法 ele

原生js实现模拟滚动条_javascript技巧

当页面中有很多滚动条,它们相互嵌套,很不好看,这时就会模拟滚动条,并给这个滚动条好看的样式,使得页面美观. 模拟滚动条很多时候是去用jquery插件,然后写几行代码就搞定了.不过随着mvvm的快速发展,很多时候都懒得用jquery了,这就是本文的动机,本屌力求用简单的不依赖jquery只依赖mvvm(avalon) api的代码,完成一个简易的滚动条. 要求: 1.鼠标滚轮可以让滚动条工作,界面滚动 2.鼠标可以拖动滚动条并让界面滚动 3.页面resize时,滚动条根据页面尺寸变化,仍然可以工作

原生js实现autocomplete插件_javascript技巧

在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间,自己动手写写,看一些原生js的东西,根据自己的思路做插件,这样能提高水平. 说到autotemplete,好多人都用过,引用autotemplete.js,然后就可以实现在输入框输入值的时候提示下拉选项,类似于百度搜索框那种提示功能,下面就来说说自己的思路. 为输入框添加input事件 1.inpu

原生js编写autoComplete插件_javascript技巧

最近有提关于下拉选项过多的时候,希望输入关键词,可以搜索内容的需求,但是之前项目太赶,所以也就没有来得及做,因为希望用原生js写一些内容,所以插件是采用了原生js写的思路如下第一步:fnInit实现初始化一些字段第二步:加载搜索框的div第三步:实现search功能,删除原节点并加载新节点第四步:点击或者回车的时候设置value 代码: autoComplete.js /** * @summary AutoComplete * @description 输入框自动检索下拉选项 * @versio

基于原生JS实现图片裁剪_javascript技巧

下面是我自己写的图片裁剪的功能介绍: 可以利用鼠标拖拉,产生裁剪框 可以改变裁剪框大小 点击确定,返回裁剪数据 原理 完成裁剪的方法有两种: 1.利用HTML5新增拖拽事件drag drop等 2.传统方法,利用鼠标事件,mousedown.mousemove等 在这里,我们采用方法2. 裁剪区域的形成 要进行裁剪首先要形成裁剪区域,这个裁剪区域的形成我们可以与鼠标移动的距离相关联.鼠标移动多远,裁剪区域就有多大.如下图: 如上图所示鼠标的横向移动距离与纵向移动距离共同组成了裁剪区域的宽和高.

自己封装的一个原生JS拖动方法(推荐)_javascript技巧

代码: function drag(t,p){ var point = p || null, target = t || null, resultX = 0, resultY = 0; (!point)? point = target : ''; //如果没有拖动点,则拖动点默认为整个别拖动元素 function getPos(t){ var offsetLeft = 0, offsetTop = 0, offsetParent = t; while(offsetParent){ offsetL