根据当前日期得到周数和周一及周日的日期
首先效果如下：
image.png
左右箭头可以前后获得前后周数和日期，达到本周的时候，不能再向后翻
image.png
先自定义一个时间过滤器
// 获得当前日期的周一或周日
app.filter('MonSun', function () {
return function (date, str) {
var nowTime = date.getTime(); //当前时间的毫秒数
var day = date.getDay(); //当前时间的星期几
var oneDayTime = 24 * 60 * 60 * 1000;
//显示周一
var MondayTime = nowTime - (day - 1) * oneDayTime;
//显示周日
var SundayTime = nowTime + (7 - day) * oneDayTime;
//初始化日期时间
var monday = new Date(MondayTime);
var sunday = new Date(SundayTime);
if (str == "monday") {
return monday
} else if (str == "sunday")
return sunday
}
});
给所有箭头定义方法
//左右箭头
$scope.prev = function () {
$scope.reportId = "";
$scope.isAct = true;
var date = new Date();
var nowtime = date.getTime();
var prevTime = $scope.today.getTime() - 7 * 24 * 3600 * 1000;
$scope.today = new Date(prevTime);
$scope.year = $scope.today.getFullYear()
$scope.week = $filter('date')($scope.today, 'w');
checkWR();
}
$scope.next = function () {
$scope.reportId = "";
var nextTime = $scope.today.getTime() + 7 * 24 * 3600 * 1000;
$scope.today = new Date(nextTime);
$scope.year = $scope.today.getFullYear()
$scope.week = $filter('date')($scope.today, 'w');
checkWR();
var date = new Date();
var nowtime = date.getTime() - 7 * 24 * 3600 * 1000;
if (nextTime > nowtime) {
$scope.isAct = false;
}
}
html展示
<div class="week-selector">
<span class="left" ng-click="prev()">
<i class="head-icon glyphicon glyphicon-menu-left"></i>
</span> //左箭头
<span class="right" ng-click="next()" ng-model="isAct"
ng-if="isAct">
<i class="head-icon glyphicon glyphicon-menu-right"></i>
</span> //右箭头
<div class="week">
<p class="date">
<span>{{year}}</span>年第<span>{{week}}</span>周</p>
<p class="range">
{{today|MonSun:'monday'|date:'MM月dd日'}}~
{{today|MonSun:'sunday'|date:'MM月dd日'}}</p>
</div>
</div>
