移动端自定义日历
1、html代码
<div class="part_item">
<span>出游日期：
<div class="choose_time">
<span id="startDate">2017-08-19
<img src="http://maanshan.ejycxtx.com/img/icon/btn_time.png"/>
</div>
</div>
<!-- 日期选择begin -->
<div id="vice_body" style="display: none;">
<div class="cal-head">
<i class="iconfont icon-cha" id="cal_back"></i>
选择日期
</div>
<div class="tn-calendar">
<div class="tn-item-container">
<div class="tn-c-header">
<a href="javascript:;" class="month-left"></a>
<span class="tn-c-title">
<a href="javascript:;" class="month-right"></a>
</div>
<div class="tn-c-body">
<table>
<tbody id="calendar">
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- 日期选择end -->
2、css代码
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td {
margin: 0;
padding: 0;
}
body {
-webkit-tap-highlight-color: rgba(0,0,0,0);
background: #f0f0f0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
.cal-head{
position: relative;
width:100%;
height:38px;
line-height: 38px;
text-align: center;
background-color: #fff;
box-shadow: 0px 1px 2px #aaaaaa;
}
.cal-head img{
position: absolute;
width: 28px;
height: 28px;
margin: 5px;
left: 0;
}
.month-left{
position: absolute;
left: 0;
width: 35px;
height: 35px;
margin-top: -8px;
background: url(../../img/v3/info/left.png) no-repeat;
background-position: center;
}
.month-right{
position: absolute;
width: 35px;
height: 35px;
margin-top: -8px;
right:0px;
background: url(../../img/v3/info/right.png) no-repeat;
background-position: center;
}
.header-box h1 {
text-align: center;
font-size: 1.6rem;
height: 100%;
padding-top: 15px;
}
.tn-calendar {
font-family: Arial,"SimHei";
padding-top: 10px;
border-bottom: #e0e0e0 1px solid;
}
.tn-calendar .tn-item-container {
background: #fff;
border-top: #e0e0e0 1px solid;
}
.tn-calendar .tn-c-header {
text-align: center;
padding: 8px 0;
}
.tn-calendar .tn-c-header .tn-c-title {
font-size: 16px;
color: #333;
}
.tn-calendar .tn-c-body table {
width: 100%;
table-layout: fixed;
}
.tn-calendar .tn-c-body .tn-c-week {
background-color: #f3f3f3;
}
.tn-calendar .tn-c-body .tn-c-week th {
text-align: center;
padding: 5px 0;
color: #666;
font-size: 12px;
font-style: normal;
font-weight: normal;
}
.tn-calendar .tn-c-body tr td {
text-align: center;
height: 40px;
font-size: 13px;
width: 3.1%;
}
.tn-calendar .tn-c-body tr td.disabled {
color: #999;
}
.tn-calendar .tn-c-body tr td.disabled2 {
color: #ccc;
pointer-events: none;
}
.tn-calendar .tn-c-body tr td.selected {
background: #f50;
}
.tn-calendar .tn-c-body tr td.selected span {
color: #fff;
}
.tn-calendar .tn-c-body tr td span.price {
color: #f50;
font-size: 12px;
display: inline-block;
transform: scale(.8);
}
.startday{
color: red;
}
3、js代码
a、通用初始化
/**
* 行程日历
* @author xj
* @param $
*/
(function($) {
var spotOrderDate = function() {
return {
defaultoption : {
month:'', // 当前使用日期的月份
th_html : '<tr class="tn-c-week">'+
'<th>日</th>'+
'<th>一</th>'+
'<th>二</th>'+
'<th>三</th>'+
'<th>四</th>'+
'<th>五</th>'+
'<th>六</th>'+
'</tr>'
},
/**
* 创建日历列表
* @returns
*/
setDate : function (monthLabel,date2) {
// var today = '';
var state = true;
// 获取当前日期
var date = new Date(monthLabel);
var date1 = new Date();
var date2 = new Date(date2);
var half_year_later = new Date(date2.valueOf()); // 添加了一个半年属性，半年后的时间不能使用
half_year_later.setMonth(date2.getMonth() + 6);
var year = date.getFullYear();
var month = date.getMonth()+1; // 当前日期所在月份
var daily = date.getDate(); // 当天日期所在的日
if(month < 10){
month = "0" + month;
}
spotOrderDate.defaultoption.month = monthLabel;
// var monthLabel = monthLabel;
// $('.tn-c-title').text(monthLabel); // 页面显示月份
$('.tn-c-title').text(year+'-'+month); // 页面显示月份
var weeknum = new Date(year+'-'+month).getDay(); // 计算每月第一天是周几
var td_html = spotOrderDate.defaultoption.th_html;
td_html += '<tr>';
// 生成日历第一行
var state = '';
var g_day = '';
var g_month = '';
var g_year = '';
// var c_year = monthLabel.substring(0,4); // 当前日历显示日期所在年份
// var c_month = monthLabel.substring(5,7); // 当前日历显示日期所在月份
// var c_day = ''; // 当前日历显示日期所在日
for (var i = 0, j = 1; i < 7; i++) {
if ( i < weeknum ) {
td_html += '<td class="disabled2"> </td>';
} else {
var show_date = new Date(year+'-'+month+'-'+ (j < 10 ? '0' + j : j))
if(date2 > show_date || half_year_later < show_date){
td_html += '<td class="disabled2">'+j+'</td>';
}else{
td_html += '<td class="">'+j+'</td>';
}
j++;
}
}
var days = spotOrderDate.getCountDays(month); // 计算当月天数
var dateLabel,jLabel;
td_html += '</tr>';
var lest = days - (7 - weeknum);
var cnum = null;
for (var j = (7 - weeknum + 1) , k = 0 ; j <= days; j++) { // 创建剩余日历行数
i++;
jLabel = j < 10 ? '0' + j : j;
dateLabel = month + '-' + jLabel;
var show_date = new Date(year+'-'+month+'-'+jLabel);
if(date2 > show_date || half_year_later < show_date){
td_html += '<td class="disabled2">'+j+'</td>';
}else{
td_html += '<td class="">'+j+'</td>';
}
// 判断是否已经7天了，达到7天则换行
if (i % 7 == 0) {td_html += '</tr><tr>'}
}
td_html += '</tr>';
$("#calendar").html(td_html);
$('#calendar').find('td').each(function () {
$(this).click(function(){
var day = +$(this).text();
if(date2 <= new Date(year+'-'+month+'-'+ (day < 10 ? '0' + day : day))){
$('#vice_body').hide();
$('#orderInfo').show();
$('#startDate').text(year+'-'+month+'-'+$(this).text());
}
});
});
},
/**
* 计算当月天数
* @param mounth
* @returns
*/
getCountDays : function (month) {
var curDate = new Date();
/* 获取当前月份 */
// var curMonth = curDate.getMonth();
// /* 生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
// curDate.setMonth(curMonth + 1);
curDate.setMonth(month);
/* 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 */
curDate.setDate(0);
/* 返回当月的天数 */
return curDate.getDate();
},
/**
* 获取当前日期
* @returns
*/
getNowDate : function (){
var today = '';
// 获取当前日期
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1; // 当前日期所在月份
var daily = date.getDate(); // 当天日期所在的日
if(daily < 10){
daily = "0" + daily;
}
if(month < 10){
month = "0" + month;
}
today = year + "-" + month + "-" + daily;
return today;
},
/**
* 月份比较
* @param a
* @param b
* @returns
*/
compare : function(a, b) {
var arr = a.split("-");
var starttime = new Date(arr[0], parseInt(arr[1]), parseInt(arr[2]));
var starttimes = starttime.getTime();
var arrs = b.split("-");
var lktime = new Date(arrs[0], parseInt(arrs[1]), parseInt(arrs[2]));
var lktimes = lktime.getTime();
if (starttimes == lktimes) {
return true;
} else {
return false;
}
}
}
}();
window.spotOrderDate = spotOrderDate;
})(jQuery)
b、操作引用代码
//初始化日历
spotOrder.initCalender();
/**日历部分*/ // 月份减 $('.month-left').click(function () { var date = spotOrder.getMonth(spotOrderDate.defaultoption.month,1); // 生成日历 spotOrderDate.setDate(date, new Date().toISOString().substring(0, 10)); }); // 月份加 $('.month-right').click(function () { var date = spotOrder.getMonth(spotOrderDate.defaultoption.month,0); // 生成日历 spotOrderDate.setDate(date, new Date().toISOString().substring(0, 10)); }); // 日期返回 $('#cal_back').click(function(){ $('#orderInfo').show(); $('#vice_body').hide(); }); //日历点击 $('#startDate').click(function(){ $('#orderInfo').hide(); $('#vice_body').show(); });
/**
* 月份加减计算
* @param sDate 传入的日期
* @param flag 用于判断加减。【0.加 1.减】
* @returns
*/
getMonth : function(sDate,flag) {
var aYmd = sDate.split('-');
var dt = new Date(aYmd[0], aYmd[1], 1);
if(flag == '0'){
dt.setMonth(dt.getMonth() + 1);
} else if(flag == '1'){
dt.setMonth(dt.getMonth() - 1);
}
var y = dt.getFullYear();
var m = dt.getMonth();
if (m == 0) { m = 12; y = y - 1; }
if (m < 10) m = '0' + m;
return y + '-' + m ;
},
/**
* 初始化日期
*/
initCalender:function(){
var date = new Date();
var year = date.getFullYear();
var month = '' + (date.getMonth()+1);
var day = '' + (date.getDate());
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
var isDate = year+"-"+month+"-"+day;
$("#startDate").text(isDate);
spotOrderDate.setDate(isDate,isDate);
}
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/13914.html