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.
324 lines
16 KiB
JavaScript
324 lines
16 KiB
JavaScript
/// <reference path="../Scripts/MicrosoftAjax.js" />
|
|
/// <reference path="../Scripts/jquery.min.js" />
|
|
/// <reference path="jquery.easyui.min.js" />
|
|
|
|
|
|
|
|
DateBox = function () {
|
|
this.ControlID = "Window_DateBox";
|
|
this.ParentElement = null; //要加入的父容器
|
|
this.Isbgiframe = false;
|
|
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 TextBox = null;
|
|
|
|
//#region 加载
|
|
this.Load = function () {
|
|
Init();
|
|
$(document.body).click(function (e) {
|
|
if (e.target.id == My.ControlID || e.target == TextBox) return;
|
|
if ($(e.target).parents("#" + My.ControlID).length == 0) {
|
|
$("#" + My.ControlID, My.ParentElement).hide();
|
|
}
|
|
});
|
|
|
|
$("#" + txtYear + ",#" + txtMonth, My.ParentElement).hover(function () {
|
|
$(this).css("background-color", "#ffd700");
|
|
}, function () {
|
|
$(this).css("background-color", "");
|
|
});
|
|
|
|
$("#" + cmdMenu, My.ParentElement).hover(function () {
|
|
$("#" + My.ControlID, My.ParentElement).draggable("enable");
|
|
}, function () {
|
|
$("#" + My.ControlID, My.ParentElement).draggable("disable");
|
|
});
|
|
|
|
$("#" + 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);
|
|
});
|
|
$("#" + cmdDay, My.ParentElement).click(function () {
|
|
SelectDate = new Date();
|
|
SelectYear = SelectDate.getFullYear();
|
|
SelectMonth = SelectDate.getMonth() + 1;
|
|
BindDateTime();
|
|
$("#" + listMonthName, My.ParentElement).hide()
|
|
$("#" + listYearName, My.ParentElement).hide();
|
|
$("#" + txtYear, My.ParentElement).html(SelectYear + "年").show();
|
|
$("#" + txtMonth, My.ParentElement).html(SelectMonth + "月").show();
|
|
$("#" + My.ControlID, My.ParentElement).hide();
|
|
$(TextBox).val(SelectDate.localeFormat("yyyy-MM-dd"));
|
|
});
|
|
|
|
$("#" + cmdClose, My.ParentElement).live("click", function () {
|
|
$("#" + My.ControlID, My.ParentElement).hide();
|
|
});
|
|
|
|
$("#" + ListDateDay + " tr[name='DataGridRow'] td", My.ParentElement).live("click", function () {
|
|
if ($(this).find(":button").length > 0) return;
|
|
if (SelectDate == null) SelectDate = new Date();
|
|
SelectDate.setFullYear(SelectYear);
|
|
var Month = $(this).attr("month");
|
|
SelectDate.setMonth(Month - 1);
|
|
SelectDate.setDate($(this).text());
|
|
$("#" + My.ControlID, My.ParentElement).hide();
|
|
$(TextBox).val(SelectDate.localeFormat("yyyy-MM-dd"));
|
|
});
|
|
|
|
}
|
|
//#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 id='" + My.ControlID + "' style = 'display: none;border-width: 1px;border-style: solid; border-color: #a4bed4;width:160px;position: absolute;z-index:9999;'>");
|
|
htmlString.append('<table style="border-width: 1px; width: 160px; border-color: #5f9fd1;background-color: #5f9fd1;" onselectstart="return false;">');
|
|
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; ">');
|
|
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: #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: #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('</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('<input id="' + cmdDay + '" style="border-width: 1px; border-style: outset; height: 20px;font-size: 12px; cursor: pointer;" title="当前日期" value="今天" type="button" />');
|
|
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>");
|
|
My.ParentElement.append(htmlString.toString());
|
|
$("#" + My.ControlID, My.ParentElement).draggable();
|
|
if (My.Isbgiframe == true) $("#" + My.ControlID, My.ParentElement).bgiframe();
|
|
}
|
|
//#endregion
|
|
//#region 显示
|
|
this.Show = function (obj) {
|
|
TextBox = obj;
|
|
var position = $(TextBox).offset();
|
|
var top = position.top + $(TextBox).height() + 7;
|
|
var left = position.left;
|
|
$("#" + My.ControlID, My.ParentElement).css("top", top).css("left", left);
|
|
var value = obj.value;
|
|
var a = Date.parseInvariant(value, "yyyy-M-d");
|
|
if (a == null) {
|
|
SelectDate = null;
|
|
var CurrentDate = new Date();
|
|
SelectYear = CurrentDate.getFullYear();
|
|
SelectMonth = CurrentDate.getMonth() + 1;
|
|
}
|
|
else {
|
|
SelectDate = a;
|
|
SelectYear = SelectDate.getFullYear();
|
|
SelectMonth = SelectDate.getMonth() + 1;
|
|
}
|
|
$("#" + listMonthName, My.ParentElement).hide()
|
|
$("#" + listYearName, My.ParentElement).hide();
|
|
BindDateTime();
|
|
|
|
$("#" + My.ControlID, My.ParentElement).show();
|
|
}
|
|
//#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 FontColor = "color: gray;";
|
|
if (month == SelectMonth) FontColor = "";
|
|
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 + '</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: 20px; 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
|
|
|
|
|
|
|
|
}
|
|
|