标签：description 简单 日历 month time year var calendar
通过jQuery和art-template.js实现日历功能。
css如下：
.clearfix {
display: block;
zoom: 1;
}
.clearfix:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
.calendar-main {
width: 245px;
border: 1px solid #e8e8e8;
border-radius: 4px;
box-shadow: 0 0 10px 5px #f5f5f5;
}
.calendar-header {
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
color: #333;
}
.calendar-title {
position: relative;
margin: 0 70px;
}
.calendar-title i {
position: absolute;
top: 15px;
left: 0;
z-index: 1;
cursor: pointer;
}
i.icon-year-prev {
left: -58px;
width: 10px;
height: 10px;
background: url(./img/icon-year-prev.png) no-repeat 0 0;
}
i.icon-month-prev {
left: -35px;
width: 6px;
height: 10px;
background: url(./img/icon-month-prev.png) no-repeat 0 0;
}
i.icon-year-next {
left: auto;
right: -58px;
width: 10px;
height: 10px;
background: url(./img/icon-year-next.png) no-repeat 0 0;
}
i.icon-month-next {
left: auto;
right: -35px;
width: 6px;
height: 10px;
background: url(./img/icon-month-next.png) no-repeat 0 0;
}
.calendar-con {
padding: 23px;
border-top: 1px solid #e8e8e8;
}
.week-item {
float: left;
margin: 0 3px;
width: 22px;
text-align: center;
font-size: 12px;
color: #595959;
}
.day-item {
margin: 5px 3px 0 3px;
float: left;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
font-size: 12px;
color: #595959;
cursor: pointer;
}
.not-cur-month {
color: #aaa;
}
.day-disabled {
color: #ccc;
cursor: not-allowed;
}
.day-selected {
background: #cfcfcf;
border-radius: 2px;
color: #fff;
}
html如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="demo.css" rel="stylesheet">
</head>
<body>
<!-- 日历 -->
<div class="calendar-main">
<div class="calendar-header">
<div class="calendar-title">
<i class="icon-year-prev"></i>
<i class="icon-month-prev"></i>
<span class="year"></span>年<span class="month"></span>月
<i class="icon-month-next"></i>
<i class="icon-year-next"></i>
</div>
</div>
<div class="calendar-con">
<div class="calendar-week clearfix"></div>
<div class="calendar-day clearfix"></div>
</div>
</div>
<!-- 星期模板 -->
<script id="weekTmpl" type="text/html">
{{each $data as item}}
<span class="week-item">{{item}}</span>
{{/each}}
</script>
<!-- 日历模板 -->
<script id="calendarTmpl" type="text/html">
{{each $data as item}}
<span class="day-item
{{if !item.curMonth}}not-cur-month{{/if}}
{{if item.selected}}day-selected{{/if}}
{{if !item.isEdit}}day-disabled{{/if}}"
data-time="{{item.time}}"
data-week="{{item.week}}">{{item.day}}</span>
{{/each}}
</script>
<script src="jquery-1.8.3.min.js"></script>
<script src="art-template.js"></script>
<script src="demo.js"></script>
</body>
</html>
js如下：
// 默认配置
var config = {
disabled: false, // 日历默认是可选择的
week: ['日', '一', '二', '三', '四', '五', '六'],
minDate: '', // 最大日期
maxDate: '', // 最小日期
selectedDay: [], // 选中的日期
type: 'single' // single：单选，multy：多选
};
var calendar = {
/**
* 初始化方法
* @param {[type]} params [description]
* @return [description]
*/
init: function(opt) {
config.selectedDay.push(calendar.getCurTime());
config = $.extend(config, opt);
$('.calendar-week').html(template('weekTmpl', config.week));
calendar.renderDay();
calendar.addEvents();
},
/**
* 渲染日期
* @param {[type]} params [description]
* @return [description]
*/
renderDay: function(time) {
var curTime = calendar.getCurTime(),
year = curTime.substring(0, 4),
month = curTime.substring(5, 7),
time0 = curTime.substring(0, 7),
dayStart = calendar.getWeek(time0 + '/01'), // 月份第一天是星期几
dayEnd = calendar.getLastDay(time0), // 月份最后一天是几号
prevMonthDay = calendar.getPrevLastDay(time0), // 上一个月的最后一天是几号
dayEndWeek = calendar.getWeek(time0 + '/' + dayEnd), // 月份最后一天是星期几
data = [];
if (time) {
dayStart = calendar.getWeek(time + '/01');
dayEnd = calendar.getLastDay(time);
prevMonthDay = calendar.getPrevLastDay(time);
dayEndWeek = calendar.getWeek(time + '/' + dayEnd);
} else {
$('.year').text(year);
$('.month').text(month);
}
calendar.showPrevDay(data, dayStart, prevMonthDay);
calendar.showCurDay(data, dayEnd);
calendar.showNextDay(data, dayEndWeek);
$('.calendar-day').html(template('calendarTmpl', data));
calendar.renderSelectedDay();
},
/**
* [getCurTime 获取当前时间]
* @return {[type]} [description]
*/
getCurTime: function() {
var date = new Date();
var year = date.getFullYear();
var month = (date.getMonth() + 1).toString();
var day = (date.getDate()).toString();
if (month.length == 1) {
month = '0' + month;
}
if (day.length == 1) {
day = '0' + day;
}
var dateTime = year + '/' + month + '/' + day;
return dateTime;
},
/**
* 根据时间获取星期
* @param {[type]} params [description]
* @return [description]
*/
getWeek: function(time) {
var date = new Date(time);
return date.getDay();
},
/**
* 获取月份最后一天
* @param {[type]} params [description]
* @return [description]
*/
getLastDay: function(time) {
var timeArr = time.split('/'),
year = Number(timeArr[0]),
month = Number(timeArr[1]);
var lastDay = new Date(year, month, 0).getDate();
return lastDay;
},
/**
* 获取上个月的最后一天
* @param {[type]} params [description]
* @return [description]
*/
getPrevLastDay: function(time) {
var timeArr = time.split('/'),
year = Number(timeArr[0]),
month = Number(timeArr[1]) - 1;
if (month < 1) {
month = 12;
year--;
}
var lastDay = new Date(year, month, 0).getDate();
return lastDay;
},
/**
* 当月显示上一个月最后几天
* @param {[type]} params [description]
* @return [description]
*/
showPrevDay: function(data, dayStart, prevMonthDay) {
for (var i = 0; i < dayStart; i++) {
var time = calendar.getPrevTime(prevMonthDay - i).time,
week = calendar.getPrevTime(prevMonthDay - i).week,
isEdit = calendar.isAbled(time);
data.push({
day: prevMonthDay - i,
time: time,
week: week,
curMonth: false,
isEdit: isEdit
});
}
data.reverse();
},
/**
* 显示当月日期
* @param {[type]} params [description]
* @return [description]
*/
showCurDay: function(data, dayEnd) {
for (var i = 1; i <= dayEnd; i++) {
var month = $('.month').text(),
month = month < 10 ? '0' + month : month,
day = i < 10 ? '0' + i : i,
time = $('.year').text() + '/' + month + '/' + day,
week = calendar.getWeek(time),
isEdit = calendar.isAbled(time);
data.push({
day: i,
time: time,
week: week,
curMonth: true,
isEdit: isEdit
});
}
},
/**
* 当月显示下个月前几天
* @param {[type]} params [description]
* @return [description]
*/
showNextDay: function(data, dayEndWeek) {
for (var i = 1; i < 7 - dayEndWeek; i++) {
var time = calendar.getNextTime(i).time,
week = calendar.getNextTime(i).week,
isEdit = calendar.isAbled(time);
data.push({
day: i,
time: time,
week: week,
curMonth: false,
isEdit: isEdit
});
}
},
/**
* 获取上一个月对应日期
* @param {[type]} params [description]
* @return [description]
*/
getPrevTime: function(day) {
var year = Number($('.year').text()),
month = Number($('.month').text()),
prevMonth = month - 1;
if (month == 1) {
if (year == 1000) {
return false;
}
year--;
prevMonth = 12;
}
prevMonth = prevMonth < 10 ? '0' + prevMonth : prevMonth;
var time = year + '/' + prevMonth + '/' + day;
return {
time: time,
week: calendar.getWeek(time)
};
},
/**
* 获取下一个月日期
* @param {[type]} params [description]
* @return [description]
*/
getNextTime: function(day) {
var year = Number($('.year').text()),
month = Number($('.month').text()),
nextMonth = month + 1;
if (month == 12) {
if (year == 2099) {
return false;
}
year++;
nextMonth = 1;
}
nextMonth = nextMonth < 10 ? '0' + nextMonth : nextMonth;
var time = year + '/' + nextMonth + '/0' + day;
return {
time: time,
week: calendar.getWeek(time)
};
},
/**
* 判断日期是否在最大和最小时间区间中
* @param {[type]} params [description]
* @return [description]
*/
isAbled: function(time) {
var minTime = config.minDate ? config.minDate.substring(0, 10) : '',
maxTime = config.maxDate ? config.maxDate.substring(0, 10) : '';
if (minTime && time < minTime || maxTime && time > maxTime) {
return false;
}
return true;
},
/**
* [renderSelectedDay 渲染选中的日期]
* @return {[type]} [description]
*/
renderSelectedDay: function () {
for(var i = 0; i < config.selectedDay.length; i++) {
var itemDay = config.selectedDay[i];
$('.day-item').each(function (i, iobj) {
var $this = $(iobj),
time = $this.data('time');
if (itemDay == time) {
$this.addClass('day-selected');
}
});
}
},
/**
* 添加事件
* @param {[type]} params [description]
* @return [description]
*/
addEvents: function() {
// 切换到上一年
$('.icon-year-prev').on('click', calendar.prevYear);
// 切换到下一年
$('.icon-year-next').on('click', calendar.nextYear);
// 切换到上一个月
$('.icon-month-prev').on('click', calendar.prevMonth);
// 切换到下一个月
$('.icon-month-next').on('click', calendar.nextMonth);
// 日期点击
$('body').on('click', '.day-item ', calendar.checkDay);
},
/**
* 切换到上一年
* @param {[type]} params [description]
* @return [description]
*/
prevYear: function() {
var curYear = Number($('.year').text()),
prevYear = curYear - 1,
month = $('.month').text();
if (prevYear < 1000) {
return false;
}
$('.year').text(prevYear);
var time = prevYear + '/' + month;
calendar.renderDay(time);
},
/**
* 切换到下一年
* @param {[type]} params [description]
* @return [description]
*/
nextYear: function() {
var curYear = Number($('.year').text()),
nextYear = curYear + 1,
month = $('.month').text();
if (nextYear > 2099) {
return false;
}
$('.year').text(nextYear);
var time = nextYear + '/' + month;
calendar.renderDay(time);
},
/**
* 切换到上一个月
* @param {[type]} params [description]
* @return [description]
*/
prevMonth: function() {
var year = Number($('.year').text()),
month = Number($('.month').text()),
prevMonth = month - 1;
if (month == 1) {
if (year == 1000) {
return false;
}
year--;
prevMonth = 12;
}
$('.year').text(year);
$('.month').text(prevMonth);
prevMonth = prevMonth < 10 ? '0' + prevMonth : prevMonth;
var time = year + '/' + prevMonth;
calendar.renderDay(time);
},
/**
* 切换到下一个月
* @param {[type]} params [description]
* @return [description]
*/
nextMonth: function() {
var year = Number($('.year').text()),
month = Number($('.month').text()),
nextMonth = month + 1;
if (month == 12) {
if (year == 2099) {
return false;
}
year++;
nextMonth = 1;
}
$('.year').text(year);
$('.month').text(nextMonth);
nextMonth = nextMonth < 10 ? '0' + nextMonth : nextMonth;
var time = year + '/' + nextMonth;
calendar.renderDay(time);
},
/**
* [checkDay 选中日期]
* @param {[type]} e [description]
* @return {[type]} [description]
*/
checkDay: function (e) {
if (config.disabled) {
return false;
}
var $this = $(e.currentTarget),
time = $this.data('time');
if (config.type == 'single') {
// 单选
$this.addClass('day-selected').siblings().removeClass('day-selected');
config.selectedDay[0] = time;
} else if (config.type == 'multy') {
// 多选
$this.toggleClass('day-selected');
if ($this.hasClass('day-selected') && config.selectedDay.join(',').indexOf(time) == -1) {
config.selectedDay.push(time);
}
}
}
};
calendar.init();
实现效果：
标签：description,简单,日历,month,time,year,var,calendar 来源： https://www.cnblogs.com/wpp281154/p/11798051.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。