移动端自定义日历详解编程语言

span id="startDate" 2017-08-19 img src="http://maanshan.ejycxtx.com/img/icon/btn_time.png"/ /div /div

 !-- 日期选择begin -- 

 div id="vice_body" 

 div 

 i id="cal_back" /i 

 选择日期 

 /div 

 div 

 div 

 div 

 a href="javascript:;" /a 

 span 

 a href="javascript:;" /a 

 /div 

 div 

 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 + 

  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 i++) { 

 if ( i weeknum ) { 

 td_html +=  td   /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 +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 +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()); 

 }); 

 }); 


 // 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

cjava