如何优化下面这个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);
});
写回答
-
这个最好将日历实现和操作分离开。
日历数据实现单独作为一个类，比如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赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
