效果截图(日期范围,周日--周六),如下:
html代码:
<div class="ewb-date-link" data-num="0">
<span class="last-year">上一年</span>
<span class="last-month">上月</span>
<span class="last-week">上周</span>
<span class="this-week">本周</span>
<span class="next-week">下周</span>
<span class="next-month">下月</span>
<span class="next-year">下一年</span>
</div>
<div class="ewb-date-info">
<p class="ewb-date-range">
<span class="start-date"></span> --- <span class="end-date"></span>
</p>
</div>
工具类:(无需修改,复制就行)
(function(win, $) {
if (!window.Util) {
window.Util = {};
}
$.extend(Util, {
});
}(this, jQuery));
/**
* 获取一周日期(周一至周日) 相关 Util 方法
*/
(function($, exports) {
$.extend(exports, {
//格式化日期:yyyy-MM-dd
formatDate: function(date) {
var myyear = date.getFullYear(),
mymonth = date.getMonth() + 1,
myweekday = date.getDate();
mymonth = mymonth < 10 ? "0" + mymonth : mymonth;
myweekday = myweekday < 10 ? "0" + myweekday : myweekday;
return (myyear + "-" + mymonth + "-" + myweekday);
},
// 取开始日期
getStartDate: function(_dom) {
var arr = _dom.text().split("-");
return {
year: parseInt(arr[0]),
month: parseInt(arr[1])
}
},
// 取结束日期
getEndDate: function(_dom) {
var arr = _dom.text().split("-");
return {
year: parseInt(arr[0]),
month: parseInt(arr[1])
}
},
// 返回日期
callBackDate: function(weekStartDate, weekEndDate) {
return {
startdate: Util.formatDate(weekStartDate),
enddate: Util.formatDate(weekEndDate)
}
},
//获得本周日期范围
getThisWeek: function(year, month, day, nowday, successcallback) {
successcallback(Util.callBackDate(new Date(year, month, day - nowday), new Date(year, month, day + (6 - nowday))));
},
//获得上周日期范围
getLastWeek: function(year, month, day, nowday, successcallback) {
successcallback(Util.callBackDate(new Date(year, month, day - nowday - 7), new Date(year, month, day - nowday - 1)));
},
//获得下周日期范围
getNextWeek: function(year, month, day, nowday, successcallback) {
successcallback(Util.callBackDate(new Date(year, month, day - nowday + 7), new Date(year, month, day - nowday + 13)));
}
});
}(jQuery, window.Util));
js代码:
(function(win, $) {
var $dateLink = $(".ewb-date-link"),
$lastWeek = $(".last-week", $dateLink),
$thisWeek = $(".this-week", $dateLink),
$nextWeek = $(".next-week", $dateLink),
$lastMonth = $(".last-month", $dateLink),
$nextMonth = $(".next-month", $dateLink),
$lastYear = $(".last-year", $dateLink),
$nextYear = $(".next-year", $dateLink),
$dateRange = $(".ewb-date-range"),
$startdate = $(".start-date", $dateRange),
$enddate = $(".end-date", $dateRange);
// 定义日期所用全局变量
var now = new Date(), //当前日期
nowDayOfWeek = now.getDay(), //今天本周的第几天
nowDay = now.getDate(), //当前日
nowMonth = now.getMonth(), //当前月
nowYear = now.getFullYear(); //当前年
// 渲染日期
var renderDate = function(data) {
$startdate.text(data.startdate);
$enddate.text(data.enddate);
}
// 默认本周
Util.getThisWeek(nowYear, nowMonth, nowDay, nowDayOfWeek, function(data) {
renderDate(data);
});
// 本周点击
$thisWeek.on('click', function(event) {
event.preventDefault();
$dateLink.attr("data-num", "0");
// 所有全局变量恢复当前日期
nowDayOfWeek = now.getDay(); //今天本周的第几天
nowDay = now.getDate(); //当前日
nowMonth = now.getMonth(); //当前月
nowYear = now.getFullYear(); //当前年
Util.getThisWeek(nowYear, nowMonth, nowDay, nowDayOfWeek, function(data) {
renderDate(data);
});
});
// 上周点击
$lastWeek.on('click', function(event) {
event.preventDefault();
var num = $dateLink.attr("data-num");
$dateLink.attr("data-num", parseInt(num) + 1);
Util.getLastWeek(nowYear, nowMonth, nowDay, new Date(nowYear, nowMonth, nowDay).getDay() + parseInt(num) * 7, function(data) {
renderDate(data);
});
});
// 下周点击
$nextWeek.on('click', function(event) {
event.preventDefault();
var num = $dateLink.attr("data-num");
$dateLink.attr("data-num", parseInt(num) - 1);
Util.getNextWeek(nowYear, nowMonth, nowDay, new Date(nowYear, nowMonth, nowDay).getDay() + parseInt(num) * 7, function(data) {
renderDate(data);
});
});
// 上月点击
$lastMonth.on('click', function(event) {
event.preventDefault();
var num = $dateLink.attr("data-num", "0"),
sdate = Util.getStartDate($startdate);
nowYear = sdate.year;
nowMonth = sdate.month - 2;
Util.getThisWeek(nowYear, nowMonth, nowDay, new Date(nowYear, nowMonth, nowDay).getDay(), function(data) {
renderDate(data);
});
});
// 下月点击
$nextMonth.on('click', function(event) {
event.preventDefault();
var num = $dateLink.attr("data-num", "0"),
sdate = Util.getStartDate($startdate);
nowYear = sdate.year;
nowMonth = sdate.month;
Util.getThisWeek(nowYear, nowMonth, nowDay, new Date(nowYear, nowMonth, nowDay).getDay(), function(data) {
renderDate(data);
});
});
// 上年点击
$lastYear.on('click', function(event) {
event.preventDefault();
var num = $dateLink.attr("data-num", "0"),
sdate = Util.getStartDate($startdate);
nowYear = sdate.year - 1;
nowMonth = sdate.month - 1;
Util.getThisWeek(nowYear, nowMonth, nowDay, new Date(nowYear, nowMonth, nowDay).getDay(), function(data) {
renderDate(data);
});
});
// 下年点击
$nextYear.on('click', function(event) {
event.preventDefault();
var num = $dateLink.attr("data-num", "0"),
sdate = Util.getStartDate($startdate);
nowYear = sdate.year + 1;
nowMonth = sdate.month - 1;
Util.getThisWeek(nowYear, nowMonth, nowDay, new Date(nowYear, nowMonth, nowDay).getDay(), function(data) {
renderDate(data);
});
});
}(this, jQuery));