移动端自定义日历

移动端自定义日历

1、html代码

					<div class="part_item">
						<span>出游日期：</span>
						<div class="choose_time">
							<span id="startDate">2017-08-19</span>
							<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"></span>
						<a href="javascript:;" class="month-right"></a>
					</div>
					<div class="tn-c-body">
						<table>
							<tbody id="calendar">
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<!-- 日期选择end -->

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;
}

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);
	        }