You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
319 lines
17 KiB
JavaScript
319 lines
17 KiB
JavaScript
/// <reference path="../Scripts/MicrosoftAjax.js" />
|
|
/// <reference path="../Scripts/jquery.min.js" />
|
|
/// <reference path="jquery.easyui.min.js" />
|
|
|
|
|
|
|
|
DateSelectBox = function () {
|
|
this.ControlID = "Window_DateSelectBox";
|
|
this.ParentElement = null; //要加入的父容器
|
|
var My = this;
|
|
var cmdPrevMonth = My.ControlID + "_" + "cmdPrevMonth";
|
|
var txtYear = My.ControlID + "_" + "txtYear";
|
|
var listYearName = My.ControlID + "_" + "listYearName";
|
|
var txtMonth = My.ControlID + "_" + "txtMonth";
|
|
var listMonthName = My.ControlID + "_" + "listMonthName";
|
|
var cmdNextMonth = My.ControlID + "_" + "cmdNextMonth";
|
|
var ListDateDay = My.ControlID + "_" + "ListDateDay";
|
|
var cmdPrevYear = My.ControlID + "_" + "cmdPrevYear";
|
|
var cmdPrevMonth2 = My.ControlID + "_" + "cmdPrevMonth2";
|
|
var cmdDay = My.ControlID + "_" + "cmdDay";
|
|
var cmdNextMonth2 = My.ControlID + "_" + "cmdNextMonth2";
|
|
var cmdNextYear = My.ControlID + "_" + "cmdNextYear";
|
|
var cmdClose = My.ControlID + "_" + "cmdClose";
|
|
var cmdMenu = My.ControlID + "_" + "cmdMenu";
|
|
|
|
var SelectYear = 0;
|
|
var SelectMonth = 0;
|
|
var SelectDate = null;
|
|
var ListDate = new Array();
|
|
|
|
var EventHandler = new Sys.EventHandlerList();
|
|
|
|
//#region 加载
|
|
this.Load = function () {
|
|
Init();
|
|
var CurrentDate = new Date();
|
|
SelectYear = CurrentDate.getFullYear();
|
|
SelectMonth = CurrentDate.getMonth() + 1;
|
|
BindDateTime();
|
|
|
|
$("#" + txtYear + ",#" + txtMonth, My.ParentElement).hover(function () {
|
|
$(this).css("background-color", "#ffd700");
|
|
}, function () {
|
|
$(this).css("background-color", "");
|
|
});
|
|
|
|
$("#" + cmdPrevYear, My.ParentElement).live("click", function () {
|
|
SelectYear -= 1;
|
|
$("#" + txtYear, My.ParentElement).html(SelectYear + "年").show();
|
|
$("#" + txtMonth, My.ParentElement).html(SelectMonth + "月").show();
|
|
$("#" + listYearName, My.ParentElement).hide();
|
|
$("#" + listMonthName, My.ParentElement).hide();
|
|
BindDateTime();
|
|
});
|
|
$("#" + cmdNextYear, My.ParentElement).live("click", function () {
|
|
SelectYear += 1;
|
|
$("#" + txtYear, My.ParentElement).html(SelectYear + "年").show();
|
|
$("#" + txtMonth, My.ParentElement).html(SelectMonth + "月").show();
|
|
$("#" + listYearName, My.ParentElement).hide();
|
|
$("#" + listMonthName, My.ParentElement).hide();
|
|
BindDateTime();
|
|
});
|
|
|
|
$("#" + cmdPrevMonth + ",#" + cmdPrevMonth2, My.ParentElement).live("click", function () {
|
|
SelectMonth -= 1;
|
|
if (SelectMonth == 0) { SelectMonth = 12; SelectYear--; }
|
|
$("#" + txtYear, My.ParentElement).html(SelectYear + "年").show();
|
|
$("#" + txtMonth, My.ParentElement).html(SelectMonth + "月").show();
|
|
$("#" + listYearName, My.ParentElement).hide();
|
|
$("#" + listMonthName, My.ParentElement).hide();
|
|
BindDateTime();
|
|
});
|
|
$("#" + cmdNextMonth + ",#" + cmdNextMonth2, My.ParentElement).live("click", function () {
|
|
SelectMonth += 1;
|
|
if (SelectMonth == 13) { SelectMonth = 1; SelectYear++; }
|
|
$("#" + txtYear, My.ParentElement).html(SelectYear + "年").show();
|
|
$("#" + txtMonth, My.ParentElement).html(SelectMonth + "月").show();
|
|
$("#" + listYearName, My.ParentElement).hide();
|
|
$("#" + listMonthName, My.ParentElement).hide();
|
|
BindDateTime();
|
|
});
|
|
|
|
$('#' + listYearName, My.ParentElement).live("change", function () {
|
|
SelectYear = parseInt($(this).val());
|
|
$("#" + txtYear, My.ParentElement).html(SelectYear + "年").show();
|
|
$("#" + listYearName, My.ParentElement).hide();
|
|
BindDateTime();
|
|
});
|
|
$('#' + listMonthName, My.ParentElement).live("change", function () {
|
|
SelectMonth = parseInt($(this).val());
|
|
$("#" + txtMonth, My.ParentElement).html(SelectMonth + "月").show();
|
|
$("#" + listMonthName, My.ParentElement).hide();
|
|
BindDateTime();
|
|
});
|
|
|
|
$("#" + txtYear, My.ParentElement).click(function () {
|
|
BindListYear();
|
|
$("#" + txtYear, My.ParentElement).hide();
|
|
$("#" + listYearName, My.ParentElement).show();
|
|
$("#" + listMonthName, My.ParentElement).hide();
|
|
$("#" + txtMonth, My.ParentElement).html(SelectMonth + "月").show();
|
|
});
|
|
$("#" + txtMonth, My.ParentElement).click(function () {
|
|
$("#" + txtMonth, My.ParentElement).hide();
|
|
$("#" + listMonthName, My.ParentElement).show();
|
|
$("#" + listYearName, My.ParentElement).hide();
|
|
$("#" + txtYear, My.ParentElement).html(SelectYear + "年").show();
|
|
$("#" + listMonthName, My.ParentElement).val(SelectMonth);
|
|
});
|
|
|
|
|
|
$("#" + cmdClose, My.ParentElement).live("click", function () {
|
|
$.fancybox.close();
|
|
});
|
|
|
|
$("#" + ListDateDay + " :checkbox", My.ParentElement).live("click", function () {
|
|
var cDate = $(this).val();
|
|
if (this.checked == true) {
|
|
ListDate.push(cDate);
|
|
} else {
|
|
for (var i = ListDate.length - 1; i >= 0; i--) {
|
|
if (ListDate[i] == cDate) { Array.removeAt(ListDate,i); break; }
|
|
}
|
|
}
|
|
OnSelectChange();
|
|
});
|
|
|
|
|
|
|
|
}
|
|
//#endregion
|
|
//#region 初始化
|
|
function Init() {
|
|
if (My.ParentElement == null) My.ParentElement = $(document.body);
|
|
if ($("#" + My.ControlID, My.ParentElement).length > 0) return;
|
|
var htmlString = new Sys.StringBuilder();
|
|
htmlString.append("<div style='display: none;'>");
|
|
htmlString.append("<div id='" + My.ControlID + "' title='选择' style='width: auto; height: auto;' >");
|
|
htmlString.append('<table style="border-width: 1px; width: 160px; border-color: #5f9fd1;background-color: #5f9fd1;">');
|
|
htmlString.append('<tr>');
|
|
htmlString.append('<td style="width: 100%; background-color: #ffffff;">');
|
|
htmlString.append('<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;height: 20px; border-color: #5f9fd1;">');
|
|
htmlString.append('<tr>');
|
|
htmlString.append('<td id="' + cmdPrevMonth + '" style="color: White; font-size: 12px; cursor: pointer; width: 16px;background-color: #5f9fd1;" title="向前翻1月" align="center"><</td>');
|
|
htmlString.append('<td style="font-size: 12px; width: 65px; cursor: default;text-align: center;" title="点击这里选择年份">');
|
|
htmlString.append('<span id="' + txtYear + '" style="width: 65px; text-align: center;">2012年</span>');
|
|
htmlString.append('<select id="' + listYearName + '" style="width: 65px; font-size: 12px;display: none; "></select>');
|
|
htmlString.append('</td>');
|
|
htmlString.append('<td style="font-size: 12px; width: 50px; cursor: default;text-align: center;" title="点击这里选择月份">');
|
|
htmlString.append('<span id="' + txtMonth + '" style="width: 50px;text-align:center;display: none;">2月</span>');
|
|
htmlString.append('<select id="' + listMonthName + '" style="width: 50px; font-size: 12px;display: none; ">');
|
|
htmlString.append('<option value="1" selected>1月</option>');
|
|
htmlString.append('<option value="2" selected>2月</option>');
|
|
htmlString.append('<option value="3" selected>3月</option>');
|
|
htmlString.append('<option value="4" selected>4月</option>');
|
|
htmlString.append('<option value="5" selected>5月</option>');
|
|
htmlString.append('<option value="6" selected>6月</option>');
|
|
htmlString.append('<option value="7" selected>7月</option>');
|
|
htmlString.append('<option value="8" selected>8月</option>');
|
|
htmlString.append('<option value="9" selected>9月</option>');
|
|
htmlString.append('<option value="10" selected>10月</option>');
|
|
htmlString.append('<option value="11" selected>11月</option>');
|
|
htmlString.append('<option value="12" selected>12月</option>');
|
|
htmlString.append('</select>');
|
|
htmlString.append('</td>');
|
|
htmlString.append('<td id="' + cmdNextMonth + '" style="color: White; font-size: 12px; cursor: pointer; width: 16px;background-color: #5f9fd1;" title="向后翻1月" align="center">></td>');
|
|
htmlString.append('</tr>');
|
|
htmlString.append('</table>');
|
|
htmlString.append('</td>');
|
|
htmlString.append('</tr>');
|
|
htmlString.append('<tr><td>');
|
|
htmlString.append('<table id="' + ListDateDay + '" border="1" cellspacing="1" style="width: 100%; background-color: #e4f8f9; border-top: 1px solid #e8e5d2; border-left: 1px solid #e8e5d2;border-right: 0px; border-bottom: 0px;" cellpadding="0">');
|
|
htmlString.append('<tr id="' + cmdMenu + '" align="center" style="height:20px;cursor: move; background-color: #5f9fd1;border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #e8e5d2;border-bottom: 1px solid #e8e5d2;">');
|
|
htmlString.append('<td style="border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #e8e5d2;border-bottom: 1px solid #e8e5d2; color: red; font-size: 12px">日</td>');
|
|
htmlString.append('<td style="border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #e8e5d2;border-bottom: 1px solid #e8e5d2; color: #ffffff; font-size: 12px">一</td>');
|
|
htmlString.append('<td style="border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #e8e5d2;border-bottom: 1px solid #e8e5d2; color: #ffffff; font-size: 12px">二</td>');
|
|
htmlString.append('<td style="border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #e8e5d2;border-bottom: 1px solid #e8e5d2; color: #ffffff; font-size: 12px">三</td>');
|
|
htmlString.append('<td style="border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #e8e5d2;border-bottom: 1px solid #e8e5d2; color: #ffffff; font-size: 12px">四</td>');
|
|
htmlString.append('<td style="border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #e8e5d2;border-bottom: 1px solid #e8e5d2; color: #ffffff; font-size: 12px">五</td>');
|
|
htmlString.append('<td style="border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #e8e5d2;border-bottom: 1px solid #e8e5d2; color: red; font-size: 12px">六</td>');
|
|
htmlString.append('</tr>');
|
|
htmlString.append('</table>');
|
|
htmlString.append('</td></tr>');
|
|
htmlString.append('<tr><td>');
|
|
htmlString.append('<table border="0" cellspacing="0" cellpadding="0" bgcolor="#e4f8f9" style="width:100%;">');
|
|
htmlString.append('<tr>');
|
|
htmlString.append('<td align="left">');
|
|
htmlString.append('<input id="' + cmdPrevYear + '" style="border-width: 1px; border-style: outset; width: 20px;font-size: 12px;cursor: pointer;" title="向前翻1年" value="<<" type="button" />');
|
|
htmlString.append('<input id="' + cmdPrevMonth2 + '" style="border-width: 1px; border-style: outset;width: 20px; font-size: 12px;cursor: pointer;" title="向前翻1月" value="<" type="button" />');
|
|
htmlString.append('</td>');
|
|
htmlString.append('<td align="center" style="width:40px;">');
|
|
htmlString.append('</td>');
|
|
htmlString.append('<td align="right">');
|
|
htmlString.append('<input id="' + cmdNextMonth2 + '" style="border-width: 1px; border-style: outset; height: 20px;width: 20px; font-size: 12px;cursor: pointer;" title="向后翻1月" value=">" type="button" />');
|
|
htmlString.append('<input id="' + cmdNextYear + '" style="border-width: 1px; border-style: outset; height: 20px; width: 20px; font-size: 12px;cursor: pointer;" title="向后翻1年" value=">>" type="button" />');
|
|
htmlString.append('</td>');
|
|
htmlString.append('</tr>');
|
|
htmlString.append('</table>');
|
|
htmlString.append('</td></tr>');
|
|
htmlString.append('</table>');
|
|
htmlString.append("</div>");
|
|
htmlString.append("</div>");
|
|
My.ParentElement.append(htmlString.toString());
|
|
}
|
|
//#endregion
|
|
//#region 显示
|
|
this.Show = function (obj) {
|
|
ListDate = obj;
|
|
if (ListDate == null) ListDate = new Array();
|
|
//SelectDate = null;
|
|
//var CurrentDate = new Date();
|
|
//SelectYear = CurrentDate.getFullYear();
|
|
//SelectMonth = CurrentDate.getMonth() + 1;
|
|
//$("#" + listMonthName, My.ParentElement).hide()
|
|
//$("#" + listYearName, My.ParentElement).hide();
|
|
BindDateTime();
|
|
$.fancybox({
|
|
'autoScale': false,
|
|
'transitionIn': 'elastic',
|
|
'transitionOut': 'elastic',
|
|
'href': '#' + My.ControlID,
|
|
'onStart': function () {
|
|
}
|
|
}, 0);
|
|
}
|
|
//#endregion
|
|
//#region 绑定年份下拉框
|
|
function BindListYear() {
|
|
var html = new Sys.StringBuilder();
|
|
for (var i = SelectYear - 20; i < SelectYear; i++) {
|
|
html.append("<option value='" + i + "'>" + i + "年</option>");
|
|
}
|
|
for (var i = SelectYear; i < SelectYear + 20; i++) {
|
|
if (i == SelectYear) { html.append("<option value='" + i + "' selected>" + i + "年</option>"); }
|
|
else { html.append("<option value='" + i + "'>" + i + "年</option>"); }
|
|
}
|
|
$('#' + listYearName, My.ParentElement).html(html.toString());
|
|
}
|
|
//#endregion
|
|
//#region 绑定日期
|
|
function BindDateTime() {
|
|
var SelectDateTime = Date.parseInvariant(SelectYear + "-" + SelectMonth + "-1", "yyyy-M-d");
|
|
$("#" + txtYear, My.ParentElement).html(SelectYear + "年").show();
|
|
$("#" + txtMonth, My.ParentElement).html(SelectMonth + "月").show();
|
|
var week = SelectDateTime.getDay();
|
|
var day = SelectDateTime.getDate() - week;
|
|
var StartDate = CloneDate(SelectDateTime);
|
|
StartDate.setDate(day);
|
|
var html = new Sys.StringBuilder();
|
|
var index = 0;
|
|
var CurrentYear = 0;
|
|
var CurrentMonth = 0;
|
|
var CurrentDay = 0;
|
|
if (SelectDate != null) {
|
|
CurrentYear = SelectDate.getFullYear();
|
|
CurrentMonth = SelectDate.getMonth() + 1;
|
|
CurrentDay = SelectDate.getDate();
|
|
}
|
|
var ToDate = new Date();
|
|
var ToYear = ToDate.getFullYear();
|
|
var ToMonth = ToDate.getMonth() + 1;
|
|
var ToDay = ToDate.getDate();
|
|
|
|
for (var i = 1; i < 40; i++) {
|
|
if (index == 0) html.append('<tr align="center" name="DataGridRow">');
|
|
var month = StartDate.getMonth() + 1;
|
|
var year = StartDate.getFullYear();
|
|
day = StartDate.getDate();
|
|
var cDate = year + "-" + month + "-" + day;
|
|
var checkState = 0;
|
|
$(ListDate).each(function () {
|
|
if (this == cDate) { checkState=1; return false; }
|
|
});
|
|
var FontColor = "";
|
|
if (index == 0 || index==6) FontColor = "color: red;";
|
|
var TdColor = "background-color: #e0e0e0;";
|
|
if (year == ToYear && month == ToMonth && day == ToDay) TdColor = "background-color: #ffd700;";
|
|
if (year == CurrentYear && month == CurrentMonth && day == CurrentDay) TdColor = "background-color: #00ffff;";
|
|
html.append('<td style="width: 20px; height: 20px; font-weight: bold;' + FontColor + TdColor + 'font-size: 12px;cursor: pointer; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff;border-right: 1px solid #e8e5d2; border-bottom: 1px solid #e8e5d2;" month="' + month + '" title="' + month + '月' + day + '日">' + day + '<input type="checkbox" value="' + cDate + '"');
|
|
if (checkState == 1) html.append(" checked='checked'");
|
|
html.append(" /></td>");
|
|
index++;
|
|
if (index == 7) { html.append('</tr>'); index = 0; }
|
|
StartDate.setDate(day + 1);
|
|
}
|
|
html.append('<td colspan="3" align="right"><input id="' + cmdClose + '" style="border-width: 1px; border-style: outset; height: 30px;width:99%; font-size: 12px;cursor: pointer; " value="关闭" type="button" /></td></tr>');
|
|
$("#" + ListDateDay + " tr[name='DataGridRow']", My.ParentElement).remove();
|
|
$("#" + ListDateDay, My.ParentElement).append(html.toString());
|
|
}
|
|
//#endregion
|
|
//#region 复制日期
|
|
function CloneDate(datetime, s) {
|
|
var dt = new Date();
|
|
dt.setFullYear(datetime.getFullYear());
|
|
dt.setMonth(datetime.getMonth());
|
|
dt.setDate(datetime.getDate());
|
|
dt.setHours(datetime.getHours());
|
|
dt.setMinutes(datetime.getMinutes());
|
|
dt.setSeconds(datetime.getSeconds());
|
|
dt.setMilliseconds(datetime.getMilliseconds());
|
|
return dt;
|
|
}
|
|
//#endregion
|
|
|
|
//#region 点击确定时触发
|
|
this.SelectChange = function (handler) {
|
|
EventHandler.addHandler('SelectChange', handler);
|
|
}
|
|
//#endregion
|
|
//#region 点击确定时触发
|
|
function OnSelectChange() {
|
|
var h = EventHandler.getHandler('SelectChange');
|
|
if (h) h(ListDate);
|
|
}
|
|
//#endregion
|
|
|
|
}
|
|
|