545 lines
18 KiB
JavaScript
545 lines
18 KiB
JavaScript
//--------------------------------------------
|
|
// 開窗挑選日期
|
|
//--------------------------------------------
|
|
|
|
//--------------------------------------------
|
|
// 這裡是日期視窗要用的變數
|
|
//--------------------------------------------
|
|
var gdCtrl = new Object();
|
|
var gcGray = "#808080";
|
|
var gcToggle = "#ffff00";
|
|
var gcBG = "#eeeeee";
|
|
var gcTableBackgroundColor = "#eeeeee";
|
|
|
|
var cy11 = 0;
|
|
var separator = "/";
|
|
var dateOrder = "YMD";
|
|
var objValue;
|
|
var datePicker;
|
|
|
|
var gdCurDate = new Date();
|
|
var giYear = gdCurDate.getFullYear();
|
|
var giMonth = gdCurDate.getMonth() + 1;
|
|
var giDay = gdCurDate.getDate();
|
|
var VicPopCal = new Object();
|
|
// var separator = Request.QueryString("SEPARATOR");
|
|
|
|
|
|
// 中文
|
|
var gMonths = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月");
|
|
var gWeekDay = new Array("日", "一", "二", "三", "四", "五", "六");
|
|
var gCloseText = "關閉";
|
|
var gClearText = "清除";
|
|
|
|
|
|
// 英文
|
|
//var gMonths = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
|
|
//var gWeekDay = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
|
|
//var gCloseText = "Close";
|
|
//var gClearText = "Clear";
|
|
|
|
var styleTD = " bgcolor='" + gcBG + "' width='19' bordercolor='" + gcBG + "' "
|
|
+ "style='font:bold 10pt Courier; text-align:center; vertical-align:middle; cursor:pointer; color:#008800;'";
|
|
|
|
var html1 =
|
|
"<div style='padding: 8px;'>"
|
|
+ "<table style='border:0; background-color:F0F0F0'>"
|
|
+ " <tr>"
|
|
+ " <td valign='middle' align='center'>"
|
|
+ " <table id='popTable' style='border:0; background-color:F0F0F0'>"
|
|
+ " <tr>"
|
|
+ " <td valign='middle' align='center'>"
|
|
+ " <!--年度輸入-->"
|
|
+ " <input type='button' value='<' name='PrevYear' id='PrevYear'"
|
|
+ " onclick='fPrevYear()' disabled=\"disabled\" style='height: 24px;"
|
|
+ " width: 24px; font: 10pt Arial; cursor: pointer;'>"
|
|
+ " <input type='text' name='tbSelYear' id='tbSelYear' onkeydown='fUpdateCal(tbSelYear.value, tbSelMonth.value);'"
|
|
+ " style='width: 4em; font: 11pt Arial;'>"
|
|
+ " <input type='button' value='>' name='NextYear' id='NextYear'"
|
|
+ " onclick='fNextYear()' disabled=\"disabled\" style='height: 24px;"
|
|
+ " width: 24px; font: 10pt Arial; cursor: pointer' />"
|
|
+ " <!-- 月份挑選 -->"
|
|
+ " <input type='button' name='PrevMonth' id='PrevMonth' disabled=\"disabled\""
|
|
+ " value='<' style='height: 24px; width: 24px; font: 10pt Arial;"
|
|
+ " cursor: pointer' onclick='fPrevMonth()' />"
|
|
+ " <select name='tbSelMonth' id='tbSelMonth' onchange='fUpdateCal(tbSelYear.value, tbSelMonth.value)'"
|
|
+ " style='width: 70; font: 11pt Arial; border-style: groove'>"
|
|
+ " <option value='1'>" + gMonths[0] + "</option>"
|
|
+ " <option value='2'>" + gMonths[1] + "</option>"
|
|
+ " <option value='3'>" + gMonths[2] + "</option>"
|
|
+ " <option value='4'>" + gMonths[3] + "</option>"
|
|
+ " <option value='5'>" + gMonths[4] + "</option>"
|
|
+ " <option value='6'>" + gMonths[5] + "</option>"
|
|
+ " <option value='7'>" + gMonths[6] + "</option>"
|
|
+ " <option value='8'>" + gMonths[7] + "</option>"
|
|
+ " <option value='9'>" + gMonths[8] + "</option>"
|
|
+ " <option value='10'>" + gMonths[9] + "</option>"
|
|
+ " <option value='11'>" + gMonths[10] + "</option>"
|
|
+ " <option value='12'>" + gMonths[11] + "</option>"
|
|
+ " </select>"
|
|
+ " <input type='button' name='NextMonth' id='NextMonth' disabled=\"disabled\""
|
|
+ " value='>' style='height: 24px; width: 24px; font: 10pt Arial;"
|
|
+ " cursor: pointer' onclick='fNextMonth()' />"
|
|
+ " </td>"
|
|
+ " </tr>"
|
|
+ " <tr>"
|
|
+ " <td align='center'>"
|
|
+ " <div style='background-color: " + gcTableBackgroundColor + ";'>"
|
|
+ " <table width='100%' border='0' cellpadding='2'>";
|
|
|
|
var html2 =
|
|
" </table>"
|
|
+ " </div>"
|
|
+ " </td>"
|
|
+ " </tr>"
|
|
+ " <tr>"
|
|
+ " <td align='center'>"
|
|
+ " <input type='button' name='Close' value='" + gCloseText + "' onclick='fCancel()'"
|
|
+ " style='height: 24px; width: 60px; font: 10pt Arial; cursor: pointer;' />"
|
|
+ " <input type='button' name='Close' value='" + gClearText + "' onclick='fClear()'"
|
|
+ " style='height: 24px; width: 60px; font: 10pt Arial; cursor: pointer;' />"
|
|
+ " </td>"
|
|
+ " </tr>"
|
|
+ " </table>"
|
|
+ " </td>"
|
|
+ " </tr>"
|
|
+ "</table>"
|
|
+ "<div>";
|
|
|
|
var tbSelYear;
|
|
var tbSelMonth;
|
|
var PrevYear;
|
|
var NextYear;
|
|
var PrevMonth;
|
|
var NextMonth;
|
|
/* --------- */
|
|
|
|
// 挑選日期
|
|
function PickDate(objid, Acy11, Aseparator, AdateOrder)
|
|
{
|
|
var aValue = "";
|
|
cy11 = Acy11;
|
|
separator = Aseparator;
|
|
dateOrder = AdateOrder;
|
|
|
|
// 畫月曆的框框
|
|
datePicker = document.getElementById("XX_SELECT_DIV");
|
|
//datePicker.style.width = "";
|
|
//datePicker.style.height = "";
|
|
datePicker.innerHTML = html1 + fDrawCal(giYear, giMonth, 19, 12) + html2;
|
|
|
|
// Parse 原先的值
|
|
objValue = document.getElementById(objid);
|
|
oldDate = objValue.value;
|
|
|
|
if (oldDate != "")
|
|
{
|
|
if (separator != "")
|
|
while (oldDate.indexOf(separator) != -1)
|
|
oldDate = oldDate.replace(separator, "");
|
|
switch (dateOrder)
|
|
{
|
|
case "DMY":
|
|
giYear = (parseInt(oldDate.substr(4, oldDate.length - 4), 10) * 1) + cy11;
|
|
giMonth = parseInt(oldDate.substr(2, 2), 10);
|
|
giDay = parseInt(oldDate.substr(0, 2), 10);
|
|
break;
|
|
case "MDY":
|
|
giYear = (parseInt(oldDate.substr(4, oldDate.length - 4), 10) * 1) + cy11;
|
|
giMonth = parseInt(oldDate.substr(0, 2), 10);
|
|
giDay = parseInt(oldDate.substr(2, 2), 10);
|
|
break;
|
|
default:
|
|
giYear = (parseInt(oldDate.substr(0, oldDate.length - 4), 10) * 1) + cy11;
|
|
giMonth = parseInt(oldDate.substr(oldDate.length - 4, 2), 10);
|
|
giDay = parseInt(oldDate.substr(oldDate.length - 2, 2), 10);
|
|
break;
|
|
}
|
|
}
|
|
|
|
//
|
|
tbSelYear = document.getElementById("tbSelYear");
|
|
tbSelMonth = document.getElementById("tbSelMonth");
|
|
PrevYear = document.getElementById("PrevYear");
|
|
NextYear = document.getElementById("NextYear");
|
|
PrevMonth = document.getElementById("PrevMonth");
|
|
NextMonth = document.getElementById("NextMonth");
|
|
|
|
tbSelYear.value = giYear - cy11;
|
|
tbSelMonth.value = giMonth;
|
|
fUpdateCal(tbSelYear.value, tbSelMonth.value);
|
|
|
|
datePicker.style.position = "absolute";
|
|
datePicker.style.display = "block";
|
|
datePicker.style.zIndex = "999";
|
|
datePicker.style.border = "solid 1px black";
|
|
datePicker.style.padding = "3px";
|
|
datePicker.style.backgroundColor = "#F0F0F0";
|
|
datePicker.style.left = offsetLeft(objValue) + "px";
|
|
datePicker.style.top = offsetTop(objValue) + objValue.offsetHeight + "px";
|
|
|
|
if (datePicker.offsetTop + datePicker.offsetHeight > document.body.clientHeight)
|
|
datePicker.style.top = document.body.clientHeight - datePicker.offsetHeight + "px";
|
|
|
|
if (datePicker.offsetLeft + datePicker.offsetWidth > document.body.clientWidth)
|
|
datePicker.style.left = document.body.clientWidth - datePicker.offsetWidth + "px";
|
|
}
|
|
|
|
// 跳出日期挑選
|
|
function fPopCalendar(popCtrl, dateCtrl, popCal)
|
|
{
|
|
parent.event.cancelBubble = true;
|
|
VicPopCal = popCal;
|
|
gdCtrl = dateCtrl;
|
|
fSetYearMon(giYear, giMonth);
|
|
var point = fGetXY(popCtrl);
|
|
with (VicPopCal.style)
|
|
{
|
|
left = point.x;
|
|
top = point.y + popCtrl.offsetHeight + 1;
|
|
visibility = 'visible';
|
|
}
|
|
VicPopCal.focus();
|
|
}
|
|
|
|
// 挑選日期之後，更新畫面上的值
|
|
function fSetDate(iYear, iMonth, iDay)
|
|
{
|
|
|
|
switch (dateOrder)
|
|
{
|
|
case "DMY":
|
|
gdCtrl.value = (("0" + iDay).length == 2 ? ("0" + iDay) : iDay) + separator
|
|
+ (("0" + iMonth).length == 2 ? ("0" + iMonth) : iMonth) + separator
|
|
+ iYear;
|
|
break;
|
|
case "MDY":
|
|
gdCtrl.value = (("0" + iMonth).length == 2 ? ("0" + iMonth) : iMonth) + separator
|
|
+ (("0" + iDay).length == 2 ? ("0" + iDay) : iDay) + separator
|
|
+ iYear;
|
|
break;
|
|
default:
|
|
gdCtrl.value = iYear + separator
|
|
+ (("0" + iMonth).length == 2 ? ("0" + iMonth) : iMonth) + separator
|
|
+ (("0" + iDay).length == 2 ? ("0" + iDay) : iDay);
|
|
break;
|
|
}
|
|
|
|
objValue.value = gdCtrl.value;
|
|
// objValue.onchange();
|
|
|
|
if ("createEvent" in document)
|
|
{
|
|
var evt = document.createEvent("HTMLEvents");
|
|
evt.initEvent("change", false, true);
|
|
objValue.dispatchEvent(evt);
|
|
}
|
|
else
|
|
objValue.fireEvent("onchange");
|
|
|
|
fCancel();
|
|
}
|
|
|
|
// 畫面點選日期格子
|
|
function fSetSelected(aCell)
|
|
{
|
|
var iOffset = 0;
|
|
var iYear = parseInt(document.getElementById("tbSelYear").value);
|
|
var iMonth = parseInt(document.getElementById("tbSelMonth").value);
|
|
|
|
aCell.bgColor = gcBG;
|
|
with (aCell.childNodes[0])
|
|
{
|
|
var iDay = parseInt(innerHTML);
|
|
if (color == gcGray)
|
|
return;
|
|
iMonth += iOffset;
|
|
if (iMonth < 1)
|
|
{
|
|
iYear--;
|
|
iMonth = 12;
|
|
}
|
|
else if (iMonth > 12)
|
|
{
|
|
iYear++;
|
|
iMonth = 1;
|
|
}
|
|
}
|
|
fSetDate(iYear, iMonth, iDay);
|
|
}
|
|
|
|
function Point(iX, iY)
|
|
{
|
|
this.x = iX;
|
|
this.y = iY;
|
|
}
|
|
|
|
function fBuildCal(iYear, iMonth)
|
|
{
|
|
var aMonth = new Array();
|
|
for (i = 1; i < 7; i++)
|
|
aMonth[i] = new Array(i);
|
|
|
|
var dYearStartDate = new Date(iYear, 0, 1);
|
|
var dCalDate = new Date(iYear, iMonth - 1, 1);
|
|
var iDayOfFirst = dCalDate.getDay();
|
|
var iDaysInMonth = new Date(iYear, iMonth, 0).getDate();
|
|
var iOffsetLast = new Date(iYear, iMonth - 1, 0).getDate() - iDayOfFirst + 1;
|
|
var iDate = 1;
|
|
var iNext = 1;
|
|
var iJuilet = Math.floor((dCalDate.getTime() - dYearStartDate.getTime()) / 86400000);
|
|
|
|
if (typeof BHRD != "undefined" && BHRD[iYear])
|
|
{
|
|
for (d = 0; d < 7; d++)
|
|
aMonth[1][d] = (d < iDayOfFirst) ? -(iOffsetLast + d) : (iDate++) + "," + BHRD[iYear].charAt(iJuilet + iDate - 2);
|
|
for (w = 2; w < 7; w++)
|
|
for (d = 0; d < 7; d++)
|
|
aMonth[w][d] = (iDate <= iDaysInMonth) ? (iDate++) + "," + BHRD[iYear].charAt(iJuilet + iDate - 2) : -(iNext++);
|
|
}
|
|
else
|
|
{
|
|
for (d = 0; d < 7; d++)
|
|
aMonth[1][d] = (d < iDayOfFirst) ? -(iOffsetLast + d) : (iDate++) + ",.";
|
|
for (w = 2; w < 7; w++)
|
|
for (d = 0; d < 7; d++)
|
|
aMonth[w][d] = (iDate <= iDaysInMonth) ? (iDate++) + ",." : -(iNext++);
|
|
}
|
|
return aMonth;
|
|
}
|
|
|
|
// 畫月曆外框
|
|
function fDrawCal(iYear, iMonth, iCellWidth, iDateTextSize)
|
|
{
|
|
var styleTD = " bgcolor='" + gcBG + "' width='" + iCellWidth + "' bordercolor='" + gcBG + "' "
|
|
+ "style='font:bold " + iDateTextSize + "pt Courier; text-align:center; vertical-align:middle; cursor:pointer; color:#008800; padding:3px 0;'";
|
|
var result = "";
|
|
|
|
result += "<tr>";
|
|
for (i = 0; i < 7; i++)
|
|
result += "<td " + styleTD + ">" + gWeekDay[i] + "</td>";
|
|
result += "</tr>";
|
|
|
|
for (w = 1; w < 7; w++)
|
|
{
|
|
result += "<tr>";
|
|
for (d = 0; d < 7; d++)
|
|
{
|
|
result += "<td id=calCell " + styleTD + "' name='calCell' "
|
|
+ "onmouseover=\"this.bgColor=gcToggle\" onmouseout=\"this.bgColor=gcBG\" "
|
|
+ "onclick='fSetSelected(this)'>";
|
|
result += "<font name='cellText' id='cellText'></font>";
|
|
result += "</td>";
|
|
}
|
|
result += "</tr>";
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
// 畫月曆內容
|
|
function fUpdateCal(iYear, iMonth)
|
|
{
|
|
iYear = (iYear * 1) + cy11;
|
|
myMonth = fBuildCal(iYear, iMonth);
|
|
PrevYear.disabled = "disabled";
|
|
NextYear.disabled = "disabled";
|
|
PrevMonth.disabled = "disabled";
|
|
NextMonth.disabled = "disabled";
|
|
try
|
|
{
|
|
var i = 0;
|
|
for (w = 0; w < 6; w++)
|
|
for (d = 0; d < 7; d++)
|
|
{
|
|
//if (document.charset)
|
|
//{
|
|
// with (cellText[(7 * w) + d])
|
|
// {
|
|
// Victor = i++;
|
|
// // 上一個月或下一個月
|
|
// if (myMonth[w + 1][d] < 0)
|
|
// {
|
|
// color = gcGray;
|
|
// innerHTML = -myMonth[w + 1][d];
|
|
// calCell[(7 * w) + d].style.cursor = "default";
|
|
// calCell[(7 * w) + d].style["background-color"] = "";
|
|
// }
|
|
// // 本月
|
|
// else
|
|
// {
|
|
// var sDateData = myMonth[w + 1][d].split(",");
|
|
// var sType = sDateData.length > 1 ? sDateData[1] : "";
|
|
// var sDate = sDateData[0];
|
|
|
|
// switch (sType)
|
|
// {
|
|
// case ".": // 無資料
|
|
// color = ((d == 0) || (d == 6)) ? "red" : "black";
|
|
// break;
|
|
// case "-": // 上班日
|
|
// color = "black";
|
|
// break;
|
|
// case "N": // 國定假日或民俗假
|
|
// color = "magenta";
|
|
// break;
|
|
// case "H": // 例假日
|
|
// color = "red";
|
|
// break;
|
|
// case "V": // 彈性休假
|
|
// color = "blue";
|
|
// break;
|
|
// case "B": // 補班
|
|
// color = "green";
|
|
// break;
|
|
// }
|
|
// innerHTML = sDateData[0];
|
|
|
|
// // 選擇到的那一天塗底色
|
|
// if (iYear == giYear && iMonth == giMonth && sDate == giDay)
|
|
// calCell[(7 * w) + d].style["background-color"] = "#FFB0FF";
|
|
// else
|
|
// calCell[(7 * w) + d].style["background-color"] = "";
|
|
|
|
// calCell[(7 * w) + d].style.cursor = "pointer";
|
|
// }
|
|
// }
|
|
//}
|
|
//else
|
|
//{
|
|
with (document.getElementsByName("cellText")[(7 * w) + d])
|
|
{
|
|
var thisCell = document.getElementsByName("calCell")[(7 * w) + d];
|
|
Victor = i++;
|
|
if (myMonth[w + 1][d] < 0)
|
|
{
|
|
color = gcGray;
|
|
innerHTML = -myMonth[w + 1][d];
|
|
thisCell.style.cursor = "default";
|
|
}
|
|
else
|
|
{
|
|
var sDateData = myMonth[w + 1][d].split(",");
|
|
var sType = sDateData.length > 1 ? sDateData[1] : "";
|
|
var sDate = sDateData[0];
|
|
|
|
switch (sType)
|
|
{
|
|
case ".": // 無資料
|
|
color = ((d == 0) || (d == 6)) ? "red" : "black";
|
|
break;
|
|
case "-": // 上班日
|
|
color = "black";
|
|
break;
|
|
case "N": // 國定假日或民俗假
|
|
color = "magenta";
|
|
break;
|
|
case "H": // 例假日
|
|
color = "red";
|
|
break;
|
|
case "V": // 彈性休假
|
|
color = "blue";
|
|
break;
|
|
case "B": // 補班
|
|
color = "green";
|
|
break;
|
|
}
|
|
innerHTML = sDateData[0];
|
|
|
|
// 選擇到的那一天塗底色
|
|
if (iYear == giYear && iMonth == giMonth && sDate == giDay)
|
|
thisCell.style.backgroundColor = "#FFB0FF";
|
|
else
|
|
thisCell.style.backgroundColor = "";
|
|
|
|
thisCell.style.cursor = "pointer";
|
|
}
|
|
}
|
|
//}
|
|
}
|
|
}
|
|
finally
|
|
{
|
|
PrevYear.disabled = "";
|
|
NextYear.disabled = "";
|
|
PrevMonth.disabled = "";
|
|
NextMonth.disabled = "";
|
|
}
|
|
}
|
|
|
|
function fSetYearMon(iYear, iMon)
|
|
{
|
|
tbSelMonth.options[iMon - 1].selected = true;
|
|
tbSelYear.value = iYear;
|
|
fUpdateCal(iYear, iMon);
|
|
}
|
|
|
|
function fPrevYear()
|
|
{
|
|
var iYear = tbSelYear.value;
|
|
var iMon = tbSelMonth.value;
|
|
|
|
fSetYearMon(--iYear, iMon);
|
|
}
|
|
|
|
function fNextYear()
|
|
{
|
|
var iYear = tbSelYear.value;
|
|
var iMon = tbSelMonth.value;
|
|
|
|
fSetYearMon(++iYear, iMon);
|
|
}
|
|
|
|
function fPrevMonth()
|
|
{
|
|
var iMon = tbSelMonth.value;
|
|
var iYear = tbSelYear.value;
|
|
|
|
if (--iMon < 1)
|
|
{
|
|
iMon = 12;
|
|
iYear--;
|
|
}
|
|
|
|
fSetYearMon(iYear, iMon);
|
|
}
|
|
|
|
function fNextMonth()
|
|
{
|
|
var iMon = tbSelMonth.value;
|
|
var iYear = tbSelYear.value;
|
|
|
|
if (++iMon > 12)
|
|
{
|
|
iMon = 1;
|
|
iYear++;
|
|
}
|
|
|
|
fSetYearMon(iYear, iMon);
|
|
}
|
|
|
|
function fGetXY(aTag)
|
|
{
|
|
var oTmp = aTag;
|
|
var pt = new Point(0, 0);
|
|
do
|
|
{
|
|
pt.x += oTmp.offsetLeft;
|
|
pt.y += oTmp.offsetTop;
|
|
oTmp = oTmp.offsetParent;
|
|
}
|
|
while (oTmp.tagName != "BODY");
|
|
return pt;
|
|
}
|
|
|
|
function fCancel()
|
|
{
|
|
datePicker.style.display = "none";
|
|
}
|
|
|
|
function fClear()
|
|
{
|
|
objValue.value = "";
|
|
fCancel();
|
|
}
|