ZZWX/wx/web/shop/js/common/calendar.js

//蜘蛛日历：
//使用：
/*
<div class="calendar">
		<div class="month clearfix fire aonelist"></div>
</div>
*/
//注意-startDate须小于chooseDate
//回调共4个参数 年 月 日 以及年-月-日
/*
 window.onload = function() {
	window.calendar.init({
		startDate:'2017-03-10',
		chooseDate:'2017-03-18',
		showType:window.calendar.init.showTypeEnum.show_price_day,
		showPriceDays:{"2017-04-01":"200","2017-04-03":"200"},  //价格日历
		showDays:['2017-04-01','2017-04-02'],						//显示的日期  配合showType=show_customer
	}, function(year,month,day,ymdString) {
		console.log(year,month,day,ymdString);
		2017 04 12 2017-04-12
	});
}
*/

(function($) {

	window.calendar = window.calendar || {};
	var initData = {}; //startDate:开始日期(必须小于chooseDate)   chooseDate:选中日期  show_all_day   show_weekday   show_weekend

	window.calendar.init = function(initData, callBack) {
		var sType = initData['showType'] ? initData['showType'] : window.calendar.init.showTypeEnum.show_all;
		var show_price_days = initData['showPriceDays'] ? initData['showPriceDays'] : {}; //价格日历
		var show_days = initData['showDays'] ? initData['showDays'] : []; //自定义的显示日期
		var startDate = initData['startDate'] ? initData['startDate'] : ""; //日期开始的有效日期
		var chooseDate = initData['chooseDate'] ? initData['chooseDate'] : ""; //日期的选中日期
		var s_d1 = startDate.replace(/\-/g, '');
		var s_d2 = chooseDate.replace(/\-/g, '');
		if(parseInt(s_d1) > parseInt(s_d2)) {
//			initData['startDate'] = chooseDate;
//			initData['chooseDate'] = startDate;
			initData['chooseDate'] = [initData['startDate'],initData['startDate']=initData['chooseDate']][0];
		}

		//判断显示6-7 或1-5 - 节假日 的特殊情况
		var choose_d = chooseDate;
		var d_index = new Date(choose_d).getDay();
		if($.inArray(d_index, [0, 6]) && sType == window.calendar.init.showTypeEnum.show_weekend) {
			var cha = 6 - d_index;
			var c_d = getDatebyDayCount(cha, choose_d);
			chooseDate = c_d;
		} else if(sType == window.calendar.init.showTypeEnum.show_work_day) {
			var c_d = '';
			if(d_index == 6) {
				c_d = getDatebyDayCount(2, choose_d);
			} else if(d_index == 0) {
				c_d = getDatebyDayCount(1, choose_d);
			} else {
				c_d = choose_d;
			}
			chooseDate = c_d;
		}
		//end

		//当前时间
		var tmonth = new Date();

		var year = tmonth.getFullYear();

		var month = tmonth.getMonth();

		var dom = $('.month');
		//中间变量 记录
		var tttmonth = '';

		var tyear = '';
		!dom.hasClass("amonth") && dom.addClass("amonth");
		//当前日期
		var date1 = new Date(year, month);
		//当前月份
		var tomonth = new Date().getMonth();
		//
		var today = new Date().getDate();
		var dayhtml = [];
		var week = ["日", "一", "二", "三", "四", "五", "六"];
		for(var t = 0; t < 3; t++) {
			dayhtml.push('<div style="clear:both">');

			var date = date1;

			month = date.getMonth() + t;
			if(month >= 12) {
				tyear = year + Math.floor(month / 12);
				tttmonth = month % 12;
			} else {
				tyear = year;
				tttmonth = month;
			}
			if(tttmonth == -1) {
				tttmonth = 12;
				//    tyear = year+ Math.floor(month/11)-1;
				tyear = year + Math.floor(month / 12);
			}
			dayhtml.push('<div class="month_title"><span class="current_month">' + (tttmonth + 1) + '月' + '</span><span class="current_year">' + tyear + '</span></div>')
			var str = '';

			$.each(week, function(i, v) {
				str += '<div class="aweek ub-f1 tx-c ui_p_t15 ui_p_b15">' + week[i] + '</div>';
			});
			dayhtml.push('<div class="ub" style="margin-left:0.2rem;margin-right:0.2rem;">' + str + '</div>')

			var nextdate = new Date(year, month)
			var firstweek = nextdate.getDay();

			var allday = new Date(parseInt(year), (parseInt(month) + 1), 0).getDate();

			var daystr = '<div style="margin-left:0.2rem;margin-right:0.2rem;">';

			for(var i = 0; i < firstweek; i++) {
				daystr += '<div class="aday"></div>'
			};
			for(i = 1; i <= allday; i++) {
				var t_m = (tttmonth + 1);
				var t_m_str = t_m;
				var t_d_str = i;
				if(t_m <= 9) {
					t_m_str = '0' + t_m;
				}
				if(i <= 9) {
					t_d_str = '0' + i;
				}
				if(i == today && month == tomonth) {
					daystr += '<div data-y=' + tyear + ' data-m=' + t_m_str + ' data-d=' + t_d_str + ' class="aday ableday disday today">今天</div>'
				} else if(i < today && month == tomonth) {
					daystr += '<div data-y=' + tyear + ' data-m=' + t_m_str + ' data-d=' + t_d_str + ' class="aday disday">' + i + '</div>'
				} else {
					daystr += '<div data-y=' + tyear + ' data-m=' + t_m_str + ' data-d=' + t_d_str + ' class="aday ableday disday">' + i + '</div>'
				}
			}

			daystr += "</div>";

			dayhtml.push(daystr);
			dayhtml.push('</div>');
		}
		dom.html(dayhtml.join(""))
		// ableday 的范围是以前的canday 不同之处是ableday是用业遍历的class 而canday是有css让日期有选
		// 
		$('.aday').each(function(index, domE) {
			var current_ymd = getCurrentDate();
			var canday_ymd = $(this).attr('data-y') + '-' + $(this).attr('data-m') + '-' + $(this).attr('data-d');
			var canday_md = $(this).attr('data-m') + '-' + $(this).attr('data-d');
			var week_index = new Date(canday_ymd).getDay();
			var arr1 = [1, 2, 3, 4, 5];
			var arr2 = [0, 6];
			if(sType == window.calendar.init.showTypeEnum.show_all && canday_ymd >= current_ymd) { //全部
				$(this).removeClass('disday');
				$(this).addClass('canday');
			} else if(sType == window.calendar.init.showTypeEnum.show_work_day && $.inArray(week_index, arr1) > -1) { //工作日
				$(this).removeClass('disday');
				$(this).addClass('canday');
			} else if(sType == window.calendar.init.showTypeEnum.show_weekend && $.inArray(week_index, arr2) > -1) { //周末
				$(this).removeClass('disday');
				$(this).addClass('canday');
			} else if(sType == window.calendar.init.showTypeEnum.show_price_day) { // 价格日历
				if(show_price_days.hasOwnProperty(canday_ymd)){
					$(this).removeClass('disday');
					$(this).addClass('canday');	
//					let cstr = `${$(this).html()}<div class="price">${show_price_days[canday_ymd]}起</div>`;
					var cstr = $(this).html()+'<div class="price">'+show_price_days[canday_ymd]+'起</div>';
					$(this).html(cstr);
				}else{
					$(this).html($(this).html()+'<div class="hide_price">0起</div>')	
				}
			} else if(sType == window.calendar.init.showTypeEnum.show_customer && $.inArray(canday_ymd, show_days) > -1) { //自定义显示日期
				$(this).removeClass('disday');
				$(this).addClass('canday');
			} else {

			}
			//默认选择的日期
			if(canday_ymd == chooseDate) {
				$(this).removeClass('select_day');
				$(this).addClass('select_go_day');
				$(this).children().removeClass('price');
				$(this).children().addClass('select_go_price');
			} else {
				var d1 = new Date(canday_ymd.replace(/\-/g, "\/"));
				var d2 = new Date(startDate.replace(/\-/g, "\/"));
				if(d1 < d2) {
					$(this).addClass('disday');
					$(this).removeClass('canday');
				}
			}

		})

		$('.canday').on('click', function() {
			$(".canday").removeClass('select_day');
			$(this).addClass('select_day');
			$('.select_price').addClass('price');
			$('.select_price').removeClass('select_price');
			$(this).children().removeClass('price');
			$(this).children().addClass('select_price');
			if(typeof(callBack) == 'function') {
				var call_y = $(this).attr('data-y');
				var call_m = $(this).attr('data-m');
				var call_d = $(this).attr('data-d');
				var call_ymd = [call_y, call_m, call_d];
				callBack(call_y, call_m, call_d, call_ymd.join('-'));
			}
		});
	}

	window.calendar.init.showTypeEnum = {
		show_all: "all",
		show_work_day: "1-5工作日",
		show_weekend: "6-7周末",
		show_price_day: "价格日历",
		show_customer: "自定义显示日期"
	};
	//得到当前日期
	function getCurrentDate() {
		var tNowTime = new Date();
		var myYear = ';' + tNowTime.getFullYear() + ';';
		var myMonth = ';' + (tNowTime.getMonth() + 1 - 0) + ';';
		var myDay = ';' + tNowTime.getDate() + ';';
		if(myMonth.length < 4) myMonth = '0' + myMonth;
		if(myDay.length < 4) myDay = '0' + myDay;
		var cNewTimeStr = myYear + '-' + myMonth + '-' + myDay;
		cNewTimeStr = cNewTimeStr.replace(/;/g, "");
		return cNewTimeStr;
	}
	//得到与当前日期相差几天的日期  +   -
	function getDatebyDayCount(addDayCount, curDate) {
		var d = new Date(curDate);
		d.setDate(d.getDate() + addDayCount); //获取AddDayCount天后的日期
		//格式化
		var year = ";" + d.getFullYear() + ";";
		var month = ";" + (d.getMonth() + 0 + 1) + ";";
		var day = ";" + d.getDate() + ";";
		if(year.length < 4) {
			year = "0" + year;
		}
		if(month.length < 4) {
			month = "0" + month;
		}
		if(day.length < 4) {
			day = "0" + day;
		}
		var datestr = year + "-" + month + "-" + day;
		datestr = datestr.replace(/;/g, "");
		return datestr;
	}
})(jQuery)