截图
JS
directive('weekpicker', ['dateFilter', function (dateFilter) {
return {
restrict: 'EA',
replace: true,
templateUrl: 'template/datepicker/week.html',
require: '^datepicker',
link: function(scope, element, attrs, ctrl) {
ctrl.step = { years: 1 };
ctrl.element = element;
ctrl._refreshView = function() {
var year = ctrl.activeDate.getFullYear(),
// 一年总周数
weeks = [];
var now = new Date();
var lastDate = new Date(year + 1, 0, 0);
var i = 1;
var j = 1;
while(i <= 365) {
var beginDate = new Date(year, 0, 0);
beginDate.setDate(beginDate.getDate() + i);
var endDate = new Date(year, 0, 0);
var len = 7 - beginDate.getDay();
endDate.setDate(endDate.getDate() + i + len);
weeks.push(angular.extend(ctrl.createDateObject(beginDate, '第' + j + '周'), {
beginDate: beginDate,
endDate: endDate > lastDate ? lastDate : endDate,
uid: scope.uniqueId + '-' + j
}));
j++;
i = i + len + 1;
}
scope.title = dateFilter(ctrl.activeDate, ctrl.formatMonthTitle);
scope.weeks = weeks;
scope.rows = ctrl.split(weeks, 7);
};
ctrl.compare = function(date1, date2) {
var activeDate = new Date( date2.getFullYear(), date2.getMonth(), date2.getDate() );
var startDate = date1;
var endDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
endDate.setDate(endDate.getDate() + (7 - endDate.getDay()));
if (activeDate <= endDate && activeDate >= startDate) {
return 0;
}
if (this.minDate) {
return endDate - activeDate;
}
if (this.maxDate) {
return startDate - activeDate;
}
};
ctrl.handleKeyDown = function( key, evt ) {
var week = 0;
if (key === 'left') {
week = week - 1; // up
} else if (key === 'up') {
week = week - 7; // down
} else if (key === 'right') {
week = week + 1; // down
} else if (key === 'down') {
week = week + 7;
} else if (key === 'pageup' || key === 'pagedown') {
var year = ctrl.activeDate.getFullYear() + (key === 'pageup' ? - 1 : 1);
ctrl.activeDate.setFullYear(year);
} else if (key === 'home') {
week = 1;
} else if (key === 'end') {
week = scope.weeks.length - 1;
}
ctrl.activeDate.setDate(ctrl.activeDate.getDate() + week * 7);
};
ctrl.refreshView();
}
};
}])
TPL
angular.module("template/datepicker/week.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/datepicker/week.html",
"\n" +
" \n" +
" \n" +
" \n" +
" \n" +
" \n" +
" \n" +
" \n" +
" \n" +
" \n" +
" \n" +
" \n" +
" \n" +
"\n" +
" \n" +
"
\n" +
"");
}]);
datepicker模板中增加weekpicker
angular.module("template/datepicker/datepicker.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/datepicker/datepicker.html",
"\n" +
" \n" +
" \n" +
" \n" +
" \n" +
"");
}]);
HTML
Controller 中的datepicker-options
var nowDate = new Date();
$scope.dateOptions = {
formatYear: 'yyyy',
showWeeks: true,
minMode: 'week',
// maxDate: '\'' + nowDate.getFullYear() + '-' + (nowDate.getMonth() + 1) + '-' + nowDate.getDate() + '\'',
// minDate: '\'' + nowDate.getFullYear() + '-' + (1) + '-' + nowDate.getDate() + '\'',
datepickerMode: 'week',
class: 'datepicker'
};
最后在DatepickerController
中 this.modes = ['day', 'month', 'year'];
后增加两行代码:
if ($attrs.minMode === 'week') {
this.modes = ['week', 'year'];
}
$scope.datepickerMode = $attrs.datepickerMode || datepickerConfig.datepickerMode;