移动端自定义日历

移动端自定义日历

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

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