126 lines
4.1 KiB
JavaScript
126 lines
4.1 KiB
JavaScript
define(function (require, exports, module) {
|
|
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 options = {
|
|
maxSellDays: 19,
|
|
selectDate: [],
|
|
minDate: getCurDate()
|
|
};
|
|
|
|
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 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 * 2);
|
|
|
|
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.show();
|
|
};
|
|
|
|
var init = function () {
|
|
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").mousedown(function (e) {
|
|
var target = $("#dateSelector").data("date-target");
|
|
if (!target || !target.length)
|
|
return;
|
|
|
|
if (target[0].dataset.keepopen === "true") {
|
|
e.stopPropagation && e.stopPropagation();
|
|
e.preventDefault && e.preventDefault();
|
|
}
|
|
|
|
var et = $(e.target);
|
|
if (et.is("#dateSelector td")) {
|
|
if (et.hasClass("date-notavailable")) return;
|
|
|
|
target.val(et.attr("data-date")).change();
|
|
et.toggleClass("date-selected");
|
|
|
|
}
|
|
});
|
|
};
|
|
init();
|
|
|
|
var selector = "input.ui-date";
|
|
$(document).on("focus", selector, function () {
|
|
showPopup($(this));
|
|
}).on("blur", selector, function () {
|
|
$("#dateSelector").hide().removeData("date-target");
|
|
});
|
|
}); |