如何优化下面这个jquery上下月份跳转函数?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

如何优化下面这个jquery上下月份跳转函数?

下面是一个上下月份跳转函数,实现点击上一月下一月时变更input的值(YYYY-MM),上下月点击事件中只有加减月份、月份范围判断代码不同,其他都一样,要如何优化才能减少重复的代码?

function getPrevNextMonth() {
    // 上一月
    $('.date-choice .prev-month').click(function() {
        var date = $('.date-choice input').val();
        var year = +date.substr(0, 4);
        var month = +date.substr(5, 2);
        month -= 1;
        if (month < 1) {
            month = 12;
            year -= 1;
        }
        month = month<10 ? '0'+month : month;
        $('.date-choice input').val(year + '-' + month);
    });
    // 下一月
    $('.date-choice .next-month').click(function() {
        var date = $('.date-choice input').val();
        var year = +date.substr(0, 4);
        var month = +date.substr(5, 2);
        month += 1;
        if (month > 12) {
            month = 1;
            year += 1;
        }
        month = month<10 ? '0'+month : month;
        $('.date-choice input').val(year + '-' + month);
    });

展开
收起
小旋风柴进 2016-05-31 11:13:52 1830 0
1 条回答
写回答
取消 提交回答
  • 小旋风柴进

    这个最好将日历实现和操作分离开。
    日历数据实现单独作为一个类,比如DatePicker,对外提供一些方法,nextMonth,prevMonth。

    然后点击操作,中调用该类的方法。

    当然这个和你要的实现,没有关系。主要说的是你的代码。

    下面来说说实现,不一定会贴代码,之前写过一个带有节假日的日历插件。

    主要是得到要显示月份的数据,使用当前月,current来表示。
    因为在显示区域,可能涉及到上一个月的尾部(月末几天),下一个月的头部(月初几天),当然这部分数据也有可能直接显示为空,这个要看需求来。

    先说前后显示为空的情况:
    主要的一个数据是current所在月份的最后一天是多少?28?29?30?31?
    怎么得到呢?这里有一个技巧,通过当前月,得到下一个月的日期对象,比如叫next,我们只需要通过下一个月的第一天,减去一天,就可以得到current月份的最后一天数据:

    //已经得到current月份的日期对象,叫current
    var current=new Date(xxxx);
    //得到当月一月份next日期对象
    var next=new Date(current.setMonth(current.getMonth()+1));
    //得到next的第一天的日期对象
    var first=new Date(next.setDate(1));
    //得到当月最后一天的日期对象
    var date=new Date(first);
    date=new Date(date.setDate(date.getDate()-1));
    //

    如果得到这个数据,处理其他的相对就容易了。
    至于不空白处理,无非是得到另一个月的最后一天,还有就是要根据当前显示的区域,计算上月,下月需要截取多少个日期来显示在当月。

    其实我在处理这个日期插件的时候,还设计为跨多个月的,也就是可以同时显示比如3个月分的数据。

    2019-07-17 19:21:37
    赞同 展开评论 打赏
问答分类:
问答标签:
相关产品:
问答排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载