献上图片:
附上代码:
.controller('calenderCtrl', function ($scope, CalenderService) {
//星期初始化
var week = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"];
//选中日期初始化
var _date = new Date();
var weekind = (_date.getDay() == 0) ? 6 : _date.getDay() - 1;
$scope.checkedDate = {
year: _date.getFullYear(),
month: _date.getMonth() + 1,
day: _date.getDate(),
week: week[weekind]
};
$scope.checkedday = _date.getDate();
//日历初始化
var initCalendar = function () {
$scope.calendar = CalenderService.initCalendar($scope.checkedDate.year, $scope.checkedDate.month, $scope.checkedDate.day);
};
initCalendar($scope.checkedDate);
//选择月份
$scope.selectMonth = function (num) {
if (($scope.checkedDate.month + num) == 0) {
$scope.checkedDate.year--;
$scope.checkedDate.month = 12;
} else if (($scope.checkedDate.month + num) == 13) {
$scope.checkedDate.year++;
$scope.checkedDate.month = 1;
} else {
$scope.checkedDate.month += num;
}
initCalendar($scope.checkedDate);
};
//选择日期
$scope.checkDay = function (cal) {
var nowmonth = angular.copy($scope.checkedDate.month);
var nowyear = angular.copy($scope.checkedDate.year);
var tempcal = angular.copy(cal);
$scope.checkedDate = angular.copy(cal);
var newdate = new Date(tempcal.year, tempcal.month - 1, tempcal.day);
var weekindex = (newdate.getDay() == 0) ? 6 : newdate.getDay() - 1;
$scope.checkedday = tempcal.day;
$scope.checkedDate.week = week[weekindex];
if(tempcal.year!=nowyear || tempcal.month!=nowmonth){
initCalendar($scope.checkedDate);
}
};
});
.factory('CalenderService', function () {
var _monthday = [];//存放日历
var _months = [];//年份下各月天数
var monthnum;//当月天数
var lastMonth; //上一月天数
var nextMounth;//下一月天数
return {
//初始化某年每月多少天
initMonths: function (_year) {
for (var i = 1; i <= 12; i++) {
var date = new Date(_year, i, 1);
_months.push((new Date(date.getTime() - 1000 * 60 * 60 * 24)).getDate());
}
},
//初始化当月,上月,下月天数
initLastAndNextMonth: function (_year, _month) {
monthnum = new Date(parseInt(_year), parseInt(_month), 0).getDate();
if (parseInt(_month) == 1) {
lastMonth = new Date(parseInt(_year) - 1, parseInt(12), 0).getDate();
} else {
lastMonth = new Date(parseInt(_year), parseInt(_month) - 1, 0).getDate();
}
if (parseInt(_month) == 12) {
nextMounth = new Date(parseInt(_year) + 1, parseInt(1), 0).getDate();
} else {
nextMounth = new Date(parseInt(_year), parseInt(_month) + 1, 0).getDate();
}
},
//初始化日历
initCalendar: function (_year, _month, _day) {
this.initData();
this.initMonths(_year);
this.initLastAndNextMonth(_year, _month);
var cal = {
year: _year,
month: _month,
day: 0
};
//本月第一天是周几
var firstweek = this.getMonthFirstDayWeek(_year, _month, 1);
firstweek = firstweek == 0 ? 7 : firstweek;
//上月空余日期填补
for (j = firstweek - 1; j > 0; j--) {
var temp1 = angular.copy(cal);
temp1.month = _month - 1 == 0 ? 12 : _month - 1;
temp1.year = _month - 1 == 0 ? _year - 1 : _year;
temp1.day = lastMonth - j + 1;
_monthday.push(temp1);
}
//本月日期填补
for (i = 1; i <= _months[_month - 1]; i++) {
var weeknum = this.getMonthWeek(_year, _month, i);
var temp2 = angular.copy(cal);
temp2.day = i;
_monthday.push(temp2);
}
//本月最后一天是周几
var lastweek = this.getMonthFirstDayWeek(_year, _month, monthnum);
//下月空余日期填补
if (lastweek != 0) {
for (j = 1; j <= 7 - lastweek; j++) {
var temp3 = angular.copy(cal);
temp3.month = _month + 1 == 13 ? 1 : _month + 1;
temp3.year = _month + 1 == 13 ? _year + 1 : _year;
temp3.day = j;
_monthday.push(temp3);
}
}
return _monthday;
},
//判断某一天是周几
getMonthFirstDayWeek: function (year, month, day) {
var date = new Date(year, month - 1, day);
return date.getDay();
},
//判断某一天是当月的第几周
getMonthWeek: function (year, month, day) {
var date = new Date(year, parseInt(month) - 1, day);
var w = date.getDay();
w = w == 0 ? 7 : w;
var d = date.getDate();
return Math.ceil(
(d + 6 - w) / 7
);
},
//重置所有数据
initData: function () {
_monthday = [];
_months = [];
monthnum = 0;
lastMonth = 0;
nextMounth = 0;
}
}
});