Light12306/Web12306/js/ui/widget_datedropdown.js

define(function (require, exports, module) {
	var eo = require("../platform/EventObject.js");
	var data = require("../data.js");

	var getCurDate = function () {
		var now = new Date();
		//now = new Date(Math.floor(now.getTime() / 86400000) * 86400000);
		now = new Date(now.getFullYear(), now.getMonth(), now.getDate());

		return now;
	};
	var getDateString = function (date) {
		return date.getFullYear() + "-" + (date.getMonth() < 9 ? "0" : "") + (date.getMonth() + 1) + "-" + (date.getDate() < 10 ? "0" : "") + date.getDate();
	};

	var renderCalendar = function (container, monthStart, minDate, maxDate) {
		var weekdayOfFirstDay = monthStart.getDay();
		var calendarBegin = new Date(monthStart.getTime() + 86400000 * weekdayOfFirstDay * -1);
		var cells = container.find("td");
		var thismonth = monthStart.getMonth();
		var currentDate = getCurDate();

		var dateTmp = calendarBegin;
		for (var i = 0; i < 35; i++) {
			var cell = cells.eq(i);
			cell.html(dateTmp.getDate());

			if (dateTmp.getMonth() !== thismonth || dateTmp < minDate || dateTmp > maxDate) {
				cell.addClass("date-notavailable");
			}
			if (dateTmp.getTime() === currentDate.getTime()) {
				cell.addClass("date-current");
			}
			cell.attr("data-date", getDateString(dateTmp));
			dateTmp = new Date(dateTmp.getTime() + 86400000);
		}

		//显示时间
		container.find("header").html(monthStart.getFullYear() + "年" + (monthStart.getMonth() + 1) + "月");
	};

	var DateDropDown = function (options) {
		var that = this;

		that.showPopup = function (ele) {
			var curDate = ele.val();
			var now = getCurDate();
			var selected = ele.data("selectedDate") || [];
			var dateDom = $("#dateSelector");

			//如果日历已经创建了，则不变。
			if (curDate)
				selected.push(curDate);

			var dayStart = new Date(now.getFullYear(), now.getMonth(), 1);
			var maxShowDay = new Date(now.getTime() + 86400 * 1000 * options.maxSellDays);

			if (dateDom.prop("data-month") !== getDateString(dayStart)) {
				renderCalendar(dateDom.find(">.month-first"), dayStart, now, maxShowDay);
				renderCalendar(dateDom.find(">.month-second"), new Date(dayStart.getFullYear(), dayStart.getMonth() + 1, 1), now, maxShowDay);
				dateDom.prop("data-month", getDateString(dayStart));
			}
			//判断当前的购买日期是否超过月底了，决定是否显示第二个日历
			if (maxShowDay.getMonth() > now.getMonth()) {
				dateDom.find(">.month-second").show();
			} else {
				dateDom.find(">.month-second").hide();
			}

			//确定有标记
			dateDom.find("td").removeClass("date-selected").filter(selected.map(function (e) { return "[data-date='" + e + "']"; }).join(",")).addClass("date-selected");
			dateDom.data("date-target", ele);

			//显示
			var offset = ele.offset();
			dateDom.css({ left: offset.left + "px", top: (offset.top + ele.height()) + "px" });
			dateDom.addClass("open");
		};
		that.hidePopup = function () {
			var dateDom = $("#dateSelector");
			dateDom.removeClass("open");
		};


		return this;
	};


	DateDropDown.prototype = Object.create(eo);
	DateDropDown.constructor = DateDropDown;

	var dropdownInstance;

	exports.init = function (selector, params) {
		var date_classes = ["month-first", "month-second"];
		var dom = ['<div id="dateSelector">'];

		_.each(date_classes, function (e) {
			var cls = e + '';

			dom.push('<div class="' + cls + '"><section class="date-selector"><nav><span class="month-prev"></span><span class="month-next"></span><header></header></nav><table><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>');
			for (var i = 0; i < 5; i++) {
				dom.push("<tr>");
				for (var j = 0; j < 7; j++) {
					dom.push("<td></td>");
				}
				dom.push("</tr>");
			}
			dom.push("</table></section></div>");
		});
		$("body").append(dom.join(""));

		$("#dateSelector td").click(function () {
			var container = $("#dateSelector");
			var cell = $(this);

			if (cell.hasClass("date-notavailable") || !container.data("date-target")) return;

			var target = container.data("date-target").val(cell.attr("data-date")).change();
			target.trigger("datechanged").change();
			dropdownInstance.hidePopup();
			container.removeData("date-target");

			//移走，确定关闭它
			target[0].blur();
			container.css({
				left: "-1000px",
				top: "-1000px"
			});
		});


		params = $.extend({
			maxSellDays: 19,
			selectDate: [],
			minDate: getCurDate()
		}, params);
		dropdownInstance = new DateDropDown(params);

		$(document).on("focus", selector, function () {
			dropdownInstance.showPopup($(this));
		}).on("blur", selector, function () {
			dropdownInstance.hidePopup($(this));
		});
	};
});