H5 代码
<ion-view title="选择时间">
<ion-content>
<!-- 日历显示 -->
<div class="row row-wrap" style="background-color: #FFFFFF;position: absolute;top: 0;z-index: 99;">
<div style="width: 14.2%;text-align: center;">日</div>
<div style="width: 14.2%;text-align: center;">一</div>
<div style="width: 14.2%;text-align: center;">二</div>
<div style="width: 14.2%;text-align: center;">三</div>
<div style="width: 14.2%;text-align: center;">四</div>
<div style="width: 14.2%;text-align: center;">五</div>
<div style="width: 14.2%;text-align: center;">六</div>
</div>
<table class="tab2-table-cleander">
<tr class="row row-wrap" ng-repeat="monthItem in vo.dateData" ng-style="{'margin-top':$index==0?'36px':'0px'}">
<td style="width: 100%;margin-top: 12px;">{{monthItem.year + '年' + monthItem.month+'月'}}</td>
<td ng-repeat="dayItem in monthItem.dayList track by $index" ng-style="vc.setChooseTimeStyle(dayItem)" ng-click="vc.chooseTime(dayItem)">
<i>{{dayItem.day}}</i><br />
<i ng-style="{'color':(dayItem.isHoliday)?'green':'#000000', 'font-size': '10px'}">{{vc.showHoliday(dayItem)}}</i>
</td>
</tr>
</table>
</ion-content>
<ion-content ng-show="vo.weekType">
<div style="clear: both;margin-top: 12px;">
<div class="m-filter-first" style="margin-top: 9px;">
<ul class="g-flexbox" style="border: 1px #D4DEEA solid;border-radius: 6px;margin: 0 6px;">
<li class="flex react-cursor vertical-line" ng-class="{'0':'item-on','1':'','2':''}[vo.itemmenu.years]" ng-click="vc.MenuIChange('years')"
data-index="0" style="text-align: center;padding: 6px 0;">
<span class="text" style="font-size: 14px;">{{vo.years.selectorName}}</span>
<i class="icon mdi" ng-class="{'0': 'mdi-chevron-up','1': 'mdi-chevron-down', '2': 'mdi-chevron-double-down'}[vo.itemmenu.years]"></i>
</li>
</ul>
<!-- 单位年度下拉列表 -->
<div class="m-filter-cont m-filter-row m-filter-comprehensive react-cursor" ng-class="{'0':'','1':'hide','2':'hide'}[vo.itemmenu.years]">
<ul class="list1 col-filter scroll-overflow">
<li class="item item-checkbox" ng-repeat="obj in vo.years.dataList" ng-click="vc.conditionChange(obj)">
{{obj.value}}
<label class="checkbox">
<input type="checkbox" style="float: right;" ng-checked="vo.years.selector == obj.id" ng-disabled="vo.years.selector == obj.id">
</label>
</li>
</ul>
</div>
<div class="row row-wrap" style="width: 100%; text-align: center;margin: auto 5px">
<div class="col col-24" ng-repeat="obj in vo.weekRange" ng-style="{'border': obj.isSelected?'cornflowerblue 0.5px solid':'#dddddd 0.5px solid', 'background-color':obj.isSelected?'cornflowerblue':'whitesmoke','border-radius': '6px','margin': '2px'}"
ng-click="vc.comfirmClick($index)">
<div style="width:100%;text-align: center;">
<span ng-style="{'color': obj.isSelected?'#FFFFFF':'#8a8a8a'}">{{obj.value}}</span>
</div>
<div style="width: 99%;text-align: center;">
<span ng-style="{'color': obj.isSelected?'#FFFFFF':'#8a8a8a','font-size': '10px'}">{{obj.valueDetail}}</span>
</div>
</div>
</div>
</div>
</div>
</ion-content>
<button style="position: absolute;position: fixed;bottom: 64px;right: 24px;overflow:scroll;border: none;padding: 6px 18px;background-color: #DD2C00DD;color: #FFFFFF;border-radius: 6px;"
ng-show="!vo.weekType" ng-click="vc.confirmChoose()">确定</button>
</ion-view>
angular.module('app')
.controller('clendarDoubleCtrl', ['$rootScope', '$scope', '$ionicHistory', '$ionicScrollDelegate', '$timeout',
'$stateParams', 'formatService',
function ($rootScope, $scope, $ionicHistory, $ionicScrollDelegate, $timeout, $stateParams, formatService) {
$scope.vo = {
itemmenu: {
years: ITEM_DEFUALT,
},
//当前 年,月,日, 假期日
currentDay: '',
currentMonth: '',
currentYear: '',
glHoliday: '',
nlHoliday: '',
nlDate: '',
//天干地支,生肖等常量,全局变量定义
calendarData: CALENDAR_DATA,
madd: MADD,
tgStr: TG,
dzStr: DZ,
numStr: NUM_CHINESE,
monStr: NUM_MON,
weekStr: NUM_WEEK,
sx: SX,
cYear: '',
cMonth: '',
cDay: '',
theDate: '',
//总月份和天数集合
dateData: [],
startTime: $stateParams.startTime,
endTime: $stateParams.endTime,
chooseCs: 0,
//显示周的部分
weekType: false,
//可选月的范围
weekRange: [],
//当前选中的年
chooseYear: '',
//当前选中的周数,
chooseWeek: '',
//可选年的范围
years: {
dataList: initRangeYears(),
selector: formatService.getYear(),
selectorName: formatService.getYear() + '年'
},
}
/**
* 创建可选年的范围
*/
function initRangeYears() {
var rangeYears = [];
var currentYear = Number(formatService.getYear());
var startYear = currentYear - 3;
for (var i = 0; i < 4; i++) {
startYear++;
var yearValue =
{
id: startYear,
value: startYear + '年'
};
rangeYears.push(yearValue);
}
return rangeYears;
};
$scope.vc = {
//创建日历
initTime: function () {
//初始化显示 当前年和月
var now = new Date();
$scope.vo.currentYear = now.getFullYear();
$scope.vo.currentMonth = now.getMonth() + 1;
$scope.vo.currentDay = now.getDate();
$scope.vo.glHoliday = $scope.vc.getHolidays($scope.vo.currentMonth, $scope.vo.currentDay);
//展示指定的年和月的所有日期
$scope.vc.preMonth($scope.vo.currentYear, $scope.vo.currentMonth);
$scope.vc.showCleander($scope.vo.currentYear, $scope.vo.currentMonth);
$scope.vc.lastMonth($scope.vo.currentYear, $scope.vo.currentMonth);
},
//前一个月
preMonth: function (year, month) {
if (month == 1) {
year = year - 1;
month = 12;
} else {
month = month - 1;
}
$scope.vc.showCleander(year, month);
},
//后一个月
lastMonth: function (year, month) {
if (month == 12) {
year = year + 1;
month = 1;
} else {
month = month + 1;
}
$scope.vc.showCleander(year, month);
},
//选择时间
chooseTime: function (dayItem) {
if (dayItem != undefined) {
switch ($scope.vo.chooseCs) {
case 0:
$scope.vo.chooseCs = 1;
$scope.vo.startTime = dayItem.alltime;
$scope.vo.endTime = '';
break;
case 1:
$scope.vo.chooseCs = 2;
if ($scope.vo.startTime > dayItem.alltime) {
$scope.vo.endTime = $scope.vo.startTime;
$scope.vo.startTime = dayItem.alltime;
} else {
$scope.vo.endTime = dayItem.alltime;
}
break;
case 2:
$scope.vo.chooseCs = 1;
$scope.vo.startTime = dayItem.alltime;
$scope.vo.endTime = '';
break;
}
}
},
//确定选则
confirmChoose: function () {
var item = {};
$rootScope.startTime = $scope.vo.startTime;
$rootScope.endTime = $scope.vo.endTime;
$ionicHistory.goBack();
},
//设置选中的时间
setChooseTimeStyle: function (item) {
if (item != undefined) {
if (item.alltime == $scope.vo.startTime && item.alltime == $scope.vo.endTime) {
return {
'width': '14.2%',
'margin-top': '6px',
'background-image': 'url(img/start_end_time.png)',
'background-size': '100% 100%',
'background-repeat': 'no-repeat'
};
} else if (item.alltime == $scope.vo.startTime) {
return {
'width': '14.2%',
'margin-top': '6px',
'background-image': 'url(img/start_time.png)',
'background-size': '100% 100%',
'background-repeat': 'no-repeat'
};
} else if (item.alltime == $scope.vo.endTime) {
return {
'width': '14.2%',
'margin-top': '6px',
'background-image': 'url(img/end_time.png)',
'background-size': '100% 100%',
'background-repeat': 'no-repeat'
};
} else if (item.alltime < $scope.vo.endTime && item.alltime > $scope.vo.startTime) {
return {
'width': '14.2%',
'margin-top': '6px',
'background': '#AFEEEE',
'background-size': '100% 100%',
'background-repeat': 'no-repeat'
};
}
return {
'width': '14.2%',
'margin-top': '6px',
'background': 'none',
'background-size': '100% 100%',
'background-repeat': 'no-repeat'
};
}
},
//展示指定的年和月的所有日期
showCleander: function (year, month) {
$scope.vo.nlDate = $scope.vc.getLunarCalendar(year, month, $scope.vo.currentDay)
$scope.vo.glHoliday = $scope.vc.getHolidays(month, $scope.currentDay);
$scope.vo.nlHoliday = $scope.vc.getnlHolidays($scope.vo.nlDate);
var dayList = [];
var beforeDays = [];
//得到表示指定年和月的1日的那个时间对象
var date = new Date(year, month - 1, 1);
//判断这个月1号是星期几,添加响应空格
var dayOfWeek = date.getDay();
var stack = [];
for (var i = 0; i < dayOfWeek; i++) {
stack.push(beforeDays.pop());
}
stack.reverse();
for (var i = 0; i < dayOfWeek; i++) {
stack.push(beforeDays.pop());
dayList.push(stack.shift());
}
//计算一个月有多少天
var daysOfMonth = $scope.vc.monthContainDays(year, month);
//从1号开始添加日历数字
for (var i = 1; i <= daysOfMonth; i++) {
var day = {};
day.day = i;
day.month = month;
day.year = year;
day.alltime = year + '-' + ((month + '').length > 1 ? month : ('0' + month)) + '-' + ((i + '').length > 1 ? (i +
'') : ('0' + i));
day.nldate = $scope.vc.getLunarCalendar(year, month, i);
day.glHoliday = $scope.vc.getHolidays(month, i);
day.nlHoliday = $scope.vc.getnlHolidays(day.nldate);
if (day.glHoliday || day.nlHoliday) {
day.isHoliday = true;
} else {
day.isHoliday = false;
}
dayList.push(day);
}
//添加每月天数
var param = {};
param.year = year;
param.month = month;
param.dayList = dayList;
$scope.vo.dateData.push(param);
},
//在日历显示节假日
showHoliday: function (day) {
if (day == undefined || day == null) {
return '';
}
if (day.nlHoliday || day.glHoliday) {
if (day.nlHoliday) {
return day.nlHoliday;
} else {
return day.glHoliday;
}
} else {
return day.nldate.day;
}
},
//返回月份包含的天数
monthContainDays: function (year, month) {
return new Date(year, month, 0).getDate();
},
//获取农历日期
getLunarDay: function (solarYear, solarMonth, solarDay) {
if (solarYear < 1921 || solarYear > 2020) {
return "";
} else {
solarMonth = (parseInt(solarMonth) > 0) ? (solarMonth - 1) : 11;
$scope.vc.nlTrans(solarYear, solarMonth, solarDay);
return $scope.vc.setNlDate(solarYear);
}
},
//获取当前农历
getLunarCalendar: function (year, month, day) {
if (year < 100) {
year = "19" + year;
}
return $scope.vc.getLunarDay(year, month, day);
},
//设置农历日期
setNlDate: function (year) {
var tmp = new Object();
tmp.month = "";
tmp.day = "";
if ($scope.vo.cMonth < 1) {
tmp.month += "(闰)";
tmp.month += $scope.vo.monStr.charAt(-$scope.vo.cMonth - 1);
} else {
tmp.month += $scope.vo.monStr.charAt($scope.vo.cMonth - 1);
}
tmp.year = year;
tmp.month += "月";
tmp.day += ($scope.vo.cDay < 11) ? "初" : (($scope.vo.cDay < 20) ? "十" : (($scope.vo.cDay < 30) ? "廿" : "三十"));
if ($scope.vo.cDay % 10 != 0 || $scope.vo.cDay == 10) {
tmp.day += $scope.vo.numStr.charAt(($scope.vo.cDay - 1) % 10);
}
return tmp;
},
//获取公历节假日名称
getHolidays: function (month, date) {
var holiday = "";
if ((month == 1) && (date == 1)) {
holiday = "元旦";
}
if ((month == 3) && (date == 12)) {
holiday = "植树节";
}
if ((month == 4) && (date == 5)) {
holiday = "清明";
}
if ((month == 5) && (date == 1)) {
holiday = "劳动节";
}
if ((month == 5) && (date == 4)) {
holiday = "青年节";
}
if ((month == 6) && (date == 1)) {
holiday = "儿童节";
}
if ((month == 8) && (date == 1)) {
holiday = "建军节";
}
if ((month == 8) && (date == 16)) {
holiday = "情人节";
}
if ((month == 10) && (date == 1)) {
holiday = "国庆节";
}
if ((month == 12) && (date == 25)) {
holiday = "圣诞节";
}
return holiday;
},
//获取农历节假日名称
getnlHolidays: function (nldate) {
nldate = nldate.month + nldate.day;
var nlHolidays = "";
if (nldate == "正月初一") {
nlHolidays = "春节";
}
if (nldate == "正月十五") {
nlHolidays = "元宵节";
}
if (nldate == "五月初五") {
nlHolidays = "端午节";
}
if (nldate == "七月初七") {
nlHolidays = "七夕";
}
if (nldate == "七月十五") {
nlHolidays = "中元节";
}
if (nldate == "八月十五") {
nlHolidays = "中秋节"
}
if (nldate == "九月初九") {
nlHolidays = "重阳节"
}
if (nldate == "腊月初八") {
nlHolidays = "腊八节"
}
if (nldate == "腊月廿四") {
nlHolidays = "小年"
}
return nlHolidays;
},
getBit: function (m, n) {
return (m >> n) & 1;
},
//农历转换
nlTrans: function () {
$scope.vo.theDate = (arguments.length != 3) ? new Date() : new Date(arguments[0], arguments[1], arguments[2]);
var total, m, n, k;
var isEnd = false;
var tmp = $scope.vo.theDate.getYear();
if (tmp < 1900) {
tmp += 1900;
}
total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + $scope.vo.madd[$scope.vo.theDate.getMonth()] +
$scope.vo.theDate.getDate() - 38;
if ($scope.vo.theDate.getYear() % 4 == 0 && $scope.vo.theDate.getMonth() > 1) {
total++;
}
for (m = 0; ; m++) {
k = ($scope.vo.calendarData[m] < 0xfff) ? 11 : 12;
for (n = k; n >= 0; n--) {
if (total <= 29 + $scope.vc.getBit($scope.vo.calendarData[m], n)) {
isEnd = true;
break;
}
total = total - 29 - $scope.vc.getBit($scope.vo.calendarData[m], n);
}
if (isEnd) break;
}
$scope.vo.cYear = 1921 + m;
$scope.vo.cMonth = k - n + 1;
$scope.vo.cDay = total;
if (k == 12) {
if ($scope.vo.cMonth == Math.floor($scope.vo.calendarData[m] / 0x10000) + 1) {
$scope.vo.cMonth = 1 - $scope.vo.cMonth;
}
if ($scope.vo.cMonth > Math.floor($scope.vo.calendarData[m] / 0x10000) + 1) {
$scope.vo.cMonth--;
}
}
},
/**
* 获取指定年,所有的周数的开始和结束时间
* @param year 指定年
*/
initRangeWeeks: function (year) {
$scope.vo.weekRange = [];
$scope.vo.weekRange = formatService.getAllWeeksInfo(year);
if(Number($scope.vo.chooseWeek)>=$scope.vo.weekRange.length)
$scope.vo.weekRange[$scope.vo.weekRange.length-1].isSelected = true;
else
//将选中的周数标记出来
$scope.vo.weekRange[$scope.vo.chooseWeek].isSelected = true;
}, //条件筛选
MenuIChange: function (type) {
switch (type) {
case 'years':
$scope.vo.itemmenu.weeks = ITEM_DEFUALT;
$scope.vo.itemmenu.years == ITEM_DEFUALT
? $scope.vo.itemmenu.years = ITEM_SELECTED
: $scope.vo.itemmenu.years = ITEM_DEFUALT;
break;
}
},
//条件改变
conditionChange: function (obj) {
$scope.vo.itemmenu.years = ITEM_DEFUALT;
$scope.vo.years.selector = obj.id;
$scope.vo.years.selectorName = obj.value;
//查询条件变更
$scope.vo.chooseYear = obj.id;
//更新当年的周数
$scope.vc.initRangeWeeks(obj.id);
},
comfirmClick: function (index) {
$rootScope.selectWeek = $scope.vo.weekRange[index];
$ionicHistory.goBack();
}
}
$scope.ready = (function () {
//获取日历类型
$scope.vo.weekType = $stateParams.type=='true';
if ($scope.vo.weekType) { //选择周数
//获取已经选中的年份
$scope.vo.chooseYear = $stateParams.selectedYear;
//获取已经选中的周
$scope.vo.chooseWeek = $stateParams.selectedWeek;
$scope.vo.years.selector = $scope.vo.chooseYear;
$scope.vo.years.selectorName = $scope.vo.chooseYear + '年';
$scope.vc.initRangeWeeks($scope.vo.chooseYear);
} else {
//初始化时间
$scope.vc.initTime();
$timeout(function () {
$ionicScrollDelegate.scrollBy(0, 248, false);
}, 200)
}
})()
}
])