效果如图：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打卡详情</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="../../css/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../css/attendance/calendar.css" />
<link rel="stylesheet" href="../../css/attendance/swiper.min.css" />
<link rel="stylesheet" href="../../css/attendance/attendance_details.css" />
</head>
<body>
<!--便于设置整体-->
<div class="maincontent">
<!--头部显示统计内容-->
<div class="signhead-top">
<table class="userInfo_box_tb">
<tr>
<td class="pass_tips_a">缺勤：<span class="missed_sign">0</span>天</td>
<td class="pass_tips_b">出勤：<span class="success_sign">0</span>天</td>
<td class="pass_tips_c">异常：<span class="error_sign">0</span>天</td>
</tr>
</table>
</div>
<!--日历-->
<div class="signhead-middle">
<input id="term-first-month" type="hidden" value="2017-04"/>
<div class="calendar-box">
</div>
</div>
<!--签到详情-->
<div class="signDetail">
<div class="signIn">
<div class="signIn-time">签到时间：<span class="signIn-timeDetails">15:55:25</span> <span class="signIn-state">迟到</span></div>
<div class="signIn-address">江苏省南京市白下路273号</div>
</div>
<div class="signOut">
<div class="signOut-time">签到时间：<span class="signOut-timeDetails">15:55:25</span> <span class="signOut-state">早退</span></div>
<div class="signOut-address">江苏省南京市白下路273号</div>
</div>
</div>
</div>
<script src="http://cdnfile-10043692.file.myqcloud.com/admin/js/jquery/2.1.4/jquery.min.js"></script>
<script src="../../js/attendance/calendar.js"></script>
<script src="../../js/attendance/swiper-3.3.1.min.js"></script>
<script>
var parameter = {"date":$('#term-first-month').val()};
initCalendar(parameter, function(data, currentDay) {});
</script>
</body>
</html>
signDetails css
body{
background-color: #EBEBEB;
}
.maincontent{
margin: 10px;
}
/*头部设置*/
.userInfo_box_tb{
width: 100%;
background-color: #FFFFFF;
}
.userInfo_box_tb tr td{
width: 33%;
line-height: 50px;
text-align: center;
}
.pass_tips_a{
color: #EA0000;
font-weight: bolder;
}
.pass_tips_b{
color: #00BB00;
font-weight: bolder;
}
.pass_tips_c{
color: #FFD306;
font-weight: bolder;
}
/*日历设置*/
/*详情设置*/
.signDetail{
font-weight: bold;
color:#272727;
margin-top: 20px;
}
.signIn,.signOut{
width: 100%;
height: 70px;
background-color: #FFFFFF;
}
.signIn-time{
height: 40px;
line-height: 40px;
margin-left: 10px;
}
.signIn-address,.signOut-address{
margin-left: 10px;
}
.signIn-state{
margin-left: 10px;
padding: 2px 5px;
background-color:#FFD306;
color: #ffffff;
}
/*签退*/
.signOut{
margin-top: 10px;
}
.signOut-time{
height: 40px;
line-height: 40px;
margin-left: 10px;
}
.signOut-state{
margin-left: 10px;
padding: 2px 5px;
background-color:#FFD306;
color: #ffffff;
}
calendar css
.time-box{
margin-left: 20px;
margin-top: 20px;
}
.time-item{
clear: both;
}
.time-item .title{
width: 100px;
float: left;
line-height: 40px;
text-align: right;
padding-right: 10px;
}
.time-item .controls{
width: 200px;
float: left;
line-height: 40px;
}
.calendar-box{
width: 100%;
height: 400px;
margin: 10px 0;
/*float: left;*/
clear: both;
position: relative;
/*border: 2px solid #57ABFF;*/
}
.calendar-box-helper{
width: 130px;
height: 400px;
float: left;
background-color:#57ABFF ;
padding-top: 10px;
}
.calendar-box-helper .title{
color: #fff;
height: 60px;
line-height: 60px;
text-align: center;
}
.calendar-box-helper .big-title{
color: #fff;
font-size: 16px;
text-align: center;
font-weight: bold;
}
.calendar-box-helper .date-info{
width: 75px;
height: 75px;
background-color: #FFBB00;
margin: 0 auto;
border-radius: 4px;
font-size: 50px;
font-weight: bold;
text-align: center;
line-height: 75px;
color: #fff;
}
.calendar-box-helper .controls{
margin-top: 30px;
padding: 0 4px;
}
.office-flag{
width: 20px;
height: 20px;
background-color: rgba( 190,190,190,.8);
display: block;
position: absolute;
left: 0;
top: 0;
color: #fff;
line-height: 20px;
text-align: center;
font-size: 12px;
}
.rest-flag{
width: 20px;
height: 20px;
background-color: rgba( 255 ,64, 64,.8);
display: block;
position: absolute;
left: 0;
top: 0;
color: #fff;
line-height: 20px;
text-align: center;
font-size: 12px;
}
.setter-body{padding-top: 60px;}
/*日历样式 START*/
*{margin: 0;padding: 0;}
body{font-family:Helvetica; -moz-user-select:none;-webkit-user-select:none;-webkit-appearance: none;-webkit-tap-highlight-color:rgba(255,255,255,0); }
.wy-calendar{/*width: 100%;z-index:1050; position: fixed; bottom: 0; left: 0;*/background-color: #fff;}
.calendar-body .calendar-contentItem:last-child{display: none;}
.calendar-header{margin-top: 0px;margin-left: 5px;height: 30px;}
.calendar-header:after{
content: " ";
position: relative;
top:6px;
left: 0;
width: 100%;
height: 1px;
border-top: 1px solid #D9D9D9; color: #D9D9D9;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
display: block;
float: left;
}
.calendar-header-date-active{background-color:#3cc51f;color: #fff;}
.calendar-header-date ul{height: 30px;border: 1px solid #3cc51f;border-radius: 2px;font-size: 14px; }
.calendar-header-date ul li{list-style-type:none;float: left;width: 125px;height: 30px;line-height: 30px; text-align: center; }
.calendar-header-date{display: block;float: left;width: 100%;}
/*.calendar-header-option{width: 50px;height: 30px; line-height: 30px; display: block;float: right;font-weight: bolder;color: #3cc51f;}*/
.calendar-body{clear: both;}
.calendar-week-header{margin-top: 10px;color:#6C6C6C;font-size: 12px;font-weight: bold;}
.calendar-week-header:after{
content: " ";
display: block;
position: relative;
left: 0;
width: 100%;
height: 1px;
border-top: 1px solid #D9D9D9;
color: #D9D9D9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.calendar-week-header ul{height: 40px; }
.calendar-week-header ul li{list-style-type:none;float: left;width: 14%;height: 40px;line-height: 40px; text-align: center; }
.calendar-week-header ul li:first-child,.calendar-week-header ul li:last-child {color:#aaa;}
.calendar-weeks{padding-bottom: 10px;}
.calendar-weeks table{width: 100%;border-collapse: collapse;}
.calendar-weeks table tr td{width: 14%;text-align: center;height: 50px;}
.calendar-weeks table tr:nth-child(1){border-left: 0;}
.calendar-weeks table tr td:first-child,.calendar-weeks table tr td:last-child{color:#aaa;}
.calendar-day{width: 100%;height: 100%; display: block;text-align: center;line-height: 50px;font-size: 18px;font-family: Helvetica;position: relative;left: 0;top: 0;}
.calendar-day:before{content: " "; position: relative;right: 0; top: 0; width: 1px; height: 100%; border-right: 1px solid #D9D9D9; color: #D9D9D9;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
right: 0px;
display: block;
float: left;
}
.calendar-day:after{content: ""; position: relative;right: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #D9D9D9; color: #D9D9D9;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
right: 0px;
display: block;
float: left;
}
.calendar-am{width: 300px;height: 250px; margin: 0 auto; margin-top: 50px;}
.calendar-today{background-color:#ACD6FF;}
.calendar-selectedDay{background-color: #57ABFF;color: #fff;}
.calculate-wrapper{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000;opacity: 0.2;}
.calculate-forbid{
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0;
top: 0;
background-image: url(../../../mobile/images/forbid.png) ;
background-size: 80% 80%;
background-position: center center;
background-repeat: no-repeat;
}
/*日历样式 END*/
/*日历拓展样式 START*/
.calendar-day{
cursor: pointer;
}
.calendar-day:hover{
/*background-color: #F0F0F0;*/
}
.calendar-year,.calendar-month{
float: left;
line-height: 40px;
margin-right: 10px;
}
/*.monthchange{
float: right;
line-height: 40px;
margin-right: 10px;
}*/
/*.button-prev{
width: 5px;
height: 5px;
display: block;
border: 2px solid #000000;
transform: rotate(45deg);
}*/
js
var year = null;
var month = null;
var single = true;
//var canFilderDate = false;
var filterDates = [];
//var selectedDates = [];
var mySwiper = null;
//var identity = null;// 1代表教师，2代表家长
//var isManager = false;// 是否是管理员，true代表是，false代表不是
function initCalendar(parameter, callback) {
//console.log(parameter);
createCalendar(parameter);
InitloadCalculate(parameter.date);// 初始化日历3周数据
mySwiper = new Swiper('.swiper-container', {
onSlideNextEnd : function(swiper) {
nextLoad(mySwiper);
checkSelectedDay();
reInitMonthLable();
//resetMonthSelect();
reInitYearLable();
},
onSlidePrevEnd : function(swiper) {
preLoad(mySwiper);
checkSelectedDay();
reInitMonthLable();
//resetMonthSelect();
reInitYearLable();
},
prevButton:'.button-prev',
nextButton:'.button-next'
});
mySwiper.update();
mySwiper.slideTo(1, 0, false);
bindDayTapEvenrAgain();// 绑定tap事件
checkSelectedDay();
setterEvent();
reInitYearLable();
}
function setterEvent(){
// $('#date-flag').change(function(){
// var date=$(this).attr('data-date');
// var currentType=$('#date-flag').val();
// var currentObj=$('.calendar-selectedDay');
// switch(currentType){
// case '0':
// currentObj.find('.rest-flag').remove();
// currentObj.find('.office-flag').remove();
// break;
// case '1':
// currentObj.find('.rest-flag').remove();
// currentObj.append('<span class="office-flag">学</span>');
// break;
// case '2':
// currentObj.find('.office-flag').remove();
// currentObj.append('<span class="rest-flag">休</span>');
// break;
// }
//
// //AJAX异步设置
// });
reInitMonthLable();
//resetMonthSelect();
$('.change-month').change(function(){
var currentVal=$(this).val();
initCalendar({"date":year+'-'+(parseInt(currentVal)+1)});
});
}
/**
* 重置月份下拉框
*/
//function resetMonthSelect(){
// $('.change-month option').eq(month-1).prop("selected", 'selected');
//}
/* 创建日历 */
function createCalendar(parameter) {
var html = '';
html = '<div id="calendar">';
html += '<div class="wy-calendar">';
html += '<div class="calendar-header">';
html += '<div class="calendar-header-date">';
html+='<div class="calendar-year"></div><div class="calendar-month change-month"></div><div class="monthchange"><span class="input-group-addon button-prev"></span><span class="input-group-addon button-next"></span></div>';
html += '</div>';
html += '<div class="calendar-header-option">';
html += '</div>';
html += '</div>';
html += '<div class="calendar-body">';
html += '<div class="calendar-contentItem">';
html += '<div class="calendar-week-header">';
html += '<ul>';
html += '<li>日</li>';
html += '<li>一</li>';
html += '<li>二</li>';
html += '<li>三</li>';
html += '<li>四</li>';
html += '<li>五</li>';
html += '<li>六</li>';
html += '</ul>';
html += ' </div>';
html += '<div class="calendar-weeks swiper-container">';
html += '<div class="swiper-wrapper">';
html += '</div>';
html += '</div>';
html += '</div>';
html += '<div class="calendar-contentItem">';
html += '<div class="calendar-am">';
html += '<div class="weui_cells weui_cells_radio">';
html += '<label class="weui_cell weui_check_label" for="calendar-am">';
html += '<div class="weui_cell_bd weui_cell_primary">';
html += '<p>上午</p>';
html += '</div>';
html += '<div class="weui_cell_ft">';
html += '<input type="radio" class="weui_check" name="radio1" id="calendar-am" value="0" checked="checked" />';
html += '<span class="weui_icon_checked"></span>';
html += '</div>';
html += '</label>';
html += '<label class="weui_cell weui_check_label" for="calendar-afternoon">';
html += '<div class="weui_cell_bd weui_cell_primary">';
html += '<p>下午</p>';
html += '</div>';
html += '<div class="weui_cell_ft">';
html += '<input type="radio" name="radio1" class="weui_check" id="calendar-afternoon" value="1" />';
html += '<span class="weui_icon_checked"></span>';
html += '</div>';
html += '</label>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
$('.calendar-box').empty().prepend(html);
}
// 初始化日历，初始化三个月的日期
function InitCalculate(date) {
//console.log(date);
if (date == undefined) {// 如果不存在日期,则默认为当前日期
var currentDate = new Date();
year = currentDate.getFullYear();
month = currentDate.getMonth() + 1;
} else {
var currentDate = new Date();
//console.log(currentDate);
year = currentDate.getFullYear();
month = currentDate.getMonth()+ 1;
//console.log(month);
}
return preMonthCalculate(1) + GrawCalculate(year, month)
+ nextMonthCalculate(1);
}
// 获取上一个月日历
function preMonthCalculate(preDayNum) {
var date=getPreMonth(preDayNum);
if(checkHasSameMonth(date)==false){
var dateArry=date.split('-');
return GrawCalculate(dateArry[0],dateArry[1]);
}
else{
return '';
}
}
// 获取下个月日历
function nextMonthCalculate(nextDayNum) {
var date=getNextMonth(nextDayNum);
if(checkHasSameMonth(date)==false){
var dateArry=date.split('-');
return GrawCalculate(dateArry[0],dateArry[1]);
}
else{
return '';
}
}
/* 画日历 */
function GrawCalculate(year, month) {
month = month;
var arr = [];
// 用当月第一天在一周中的日期值作为当月离第一天的天数
for (var i = 1, firstDay = new Date(year, month - 1, 1).getDay(); i <= firstDay; i++) {
arr.push(" ");
}
// 用当月最后一天在一个月中的日期值作为当月的天数
for (var i = 1, monthDay = new Date(year, month, 0).getDate(); i <= monthDay; i++) {
arr.push(i);
}
var daysArryIndex = 0;
var monthHtml = '<div class="swiper-slide" data-date="'+year+'-'+month+'"><table>';
var weekHtml = '<tr>';
while (arr.length > daysArryIndex) {
for (var i = 0; i < 7; i++) {
if ($.trim(arr[daysArryIndex]).length == 0
|| arr[daysArryIndex] == undefined) {
weekHtml += '<td><span class="calendar-day"></span></td>';
} else {
weekHtml += '<td>';
var writeDate = getDataBaseDate(year, month, arr[daysArryIndex]);
if (IsSameDay(new Date(year, month - 1, arr[daysArryIndex]),new Date())) {
if (arr[daysArryIndex] == '1') {
weekHtml += '<span class="calendar-day calendar-today" >'
+ month
+ '月<input type="hidden" value="'
+ writeDate + '"/>';
} else {
weekHtml += '<span class="calendar-day calendar-today">'
+ arr[daysArryIndex]
+ '<input type="hidden" value="'
+ writeDate
+ '"/>';
}
} else {
if (arr[daysArryIndex] == '1') {
weekHtml += '<span class="calendar-day">' + month
+ '月<input type="hidden" value="' + writeDate
+ '"/>';
} else {
weekHtml += '<span class="calendar-day">'
+ arr[daysArryIndex]
+ '<input type="hidden" value="' + writeDate
+ '"/>';
}
}
weekHtml += '</span></td>';
}
if (i == 6) {
weekHtml += '</tr>';
monthHtml += weekHtml;
weekHtml = '<tr>';
}
daysArryIndex++;
}
}
monthHtml += '</table></div>';
return monthHtml;
}
// 判断是否同一日，即检测是否是当天日期
function IsSameDay(d1, d2) {
return (d1.getFullYear() == d2.getFullYear()
&& d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
}
function preLoad(mySwiper) {
var caculateHtml=preMonthCalculate(2);
var dateArry=getPreMonth(1).split('-');
year=dateArry[0];
month=dateArry[1];
if(caculateHtml.length>0){
mySwiper.prependSlide(caculateHtml);
bindDayTapEvenrAgain();
}
}
function nextLoad(mySwiper) {
var caculateHtml=nextMonthCalculate(2);
var dateArry=getNextMonth(1).split('-');
year=dateArry[0];
month=dateArry[1];
if(caculateHtml.length>0){
mySwiper.appendSlide(caculateHtml);
bindDayTapEvenrAgain();
}
}
function reInitYearMonth(day) {
$('.calendar-box-helper').find('.title').text(day);
$('.calendar-box-helper').find('.date-info').text(new Date(day).getDate());
}
$('.calendar-header-date li').click(function(event) {
$('.calendar-header-date li').removeClass('calendar-header-date-active');
$(this).addClass('calendar-header-date-active');
var currentIndex = $('.calendar-header-date li').index(this);
$('.calendar-contentItem').eq(currentIndex).show().siblings().hide();
});
$('.calendar-am input').click(function(event) {
var headerItems = $('.calendar-header-date ul li');
if ($(this).val() == '1') {
headerItems.eq(1).text('下午');
} else {
headerItems.eq(1).text('上午');
}
});
// 再次绑定click事件
function bindDayTapEvenrAgain() {
$('.calendar-day').unbind('click').bind('click', function() {
if ($(this).text().length > 0) {
var clickedDate = $(this).find('input').val();//当前时间
var data_flag=$(this).attr('data-flag');
var day = clickedDate;
$('.calendar-day').removeClass('calendar-selectedDay');
$(this).addClass('calendar-selectedDay');
reInitYearMonth(clickedDate);
$("#date-flag").attr('data-date',clickedDate);
//ajax获取当前日期的状态类型然后更新签到状态
//签到
$(".signIn-timeDetails").text("16:44:22");
$(".signIn-address").text("江苏省南京市白下383号");
$(".signIn-state").text("缺勤");
$(".signIn-state").css("backgroundColor","#EA0000");
//签退
$(".signOut-timeDetails").text("16:44:22");
$(".signOut-address").text("江苏省南京市白下383号");
$(".signOut-state").text("缺勤");
$(".signOut-state").css("backgroundColor","#EA0000");
//$('.controls').show();
// switch(data_flag){
// case '1':
// $("#date-flag option").eq(1).prop("selected", 'selected');
// break;
// case '2':
// $("#date-flag option").eq(2).prop("selected", 'selected');
// break;
// default:
// $("#date-flag option").eq(0).prop("selected", 'selected');
// break;
// }
}
})
}
function InitloadCalculate(date) {
$('.swiper-wrapper').append(InitCalculate(date))
bindDayTapEvenrAgain();
reInitYearMonth(year + '-' + month + '-' + new Date().getDate());
}
/**
* 检测是否可以被点击
*
* @return {[type]} [description]
*/
function checkCanClick(value) {
return true;
}
/**
* 获取上一个月
*
* @date 格式为yyyy-mm
*/
function getPreMonth(preMonthNum) {
var currentyear = year; // 获取当前日期的年份
var currentmonth = month; // 获取当前日期的月份
var days = new Date(currentyear, currentmonth, 0);
days = days.getDate(); // 获取当前日期中月的天数
var year2 = currentyear;
var month2 = parseInt(currentmonth) - preMonthNum;
if (month2 <= 0) {
year2 = parseInt(year2) - 1;
month2 = 12 + parseInt(currentmonth) - preMonthNum;
}
var t2 = year2 + '-' + month2;
return t2;
}
/**
* 获取下一个月
*
* @date 格式为yyyy-mm
*/
function getNextMonth(preMonthNum) {
var currentyear = year; // 获取当前日期的年份
var currentmonth = month; // 获取当前日期的月份
var days = new Date(currentyear, currentmonth, 0);
days = days.getDate(); // 获取当前日期中的月的天数
var year2 = currentyear;
var month2 = parseInt(month) + preMonthNum;
if (month2 >= 13) {
year2 = parseInt(year2) + 1;
month2 = currentmonth - 12 + preMonthNum;
}
var t2 = year2 + '-' + month2;
return t2;
}
/**
* 检查是否存在选中的日期
*
* @param {[type]}
* year [description]
* @param {[type]}
* month [description]
* @param {[type]}
* day [description]
* @return {[type]} [description]
*/
function checkSelectedDay() {//获取调整日期集合
var selectDay = getDataBaseDate(year, month, 1);// 月的第一天
//putCheckSelectedDay();
}
/**
* ajax获取已选择日期和可勾选日期放入日历中
*/
//function putCheckSelectedDay() {
// var activeObj = $('.swiper-slide-active');// 获取活动页对象
// var activeDays = activeObj.find('.calendar-day');// 获取活动页下面所有的天数
// activeDays.each(function(index, el) {
// var dayValue = $(el).find('input').val();
// if (dayValue != undefined) {
// var checkSelectedResult = IsFilterDay(dayValue);
// switch(checkSelectedResult){
// case 1:
// $(el).attr('data-flag',1).append('<span class="office-flag">学</span>');
// break;
// case 2 :
// $(el).attr('data-flag',2).append('<span class="rest-flag">休</span>');
// break;
// };
// }
// });
//}
/**
* 判断是否在过滤日期里，如果有就返回类型(-1代表不过滤1代表学 2代表休)
* @param {Object} dayValue
*/
function IsFilterDay(dayValue){
//1代表正常 2代表
var filterData=[{"date":"2017-03-10","type":1},{"date":"2017-03-11","type":2},{"date":"2017-03-12","type":2}];
var dayArray=new Array();
$.each(filterData,function(index,item){
dayArray.push(item.date);
});
var checkSelectedResult=-1;
$.each(dayArray, function(index,item) {
if(item==dayValue){
checkSelectedResult=index;
}
});
//console.log('index'+checkSelectedResult);
var result=null;
if(checkSelectedResult==-1){
result=-1;
}else{
result=filterData[checkSelectedResult].type;
}
return result;
}
/**
* 处理月份，如果没有0就加0
*
* @param {[type]}
* month [description]
* @return {[type]} [description]
*/
function getMonthprefix(month) {
var monthprefix = null;
if (parseInt(month) < 10) {
monthprefix = '0' + month;
} else {
monthprefix = month;
}
return monthprefix;
}
// 将日出处理成数据库日期
function getDataBaseDate(year, month, day) {
var dataBaseMonth = month;
var dataBseDay = day;
if (month < 10) {
dataBaseMonth = '0' + month;
}
if (day < 10) {
dataBseDay = '0' + day;
}
return year + '-' + dataBaseMonth + '-' + dataBseDay;
}
/**
* 检查是否存在相同的年月，用于滑动加载，避免相同数据出现
* @return {[type]} [description]
*/
function checkHasSameMonth(date){
var flag=false;
$('.swiper-slide').each(function(index, el) {
//console.log($(el).attr('data-date'));
if($(el).attr('data-date')==date){
flag =true;
return false;
}
});
return flag;
}
function reInitYearLable(){
$('.calendar-year').text(year+'年');
}
function reInitMonthLable(){
$('.calendar-month').text(month+'月');
}
774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
