497 lines
19 KiB
Plaintext
497 lines
19 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DatePicker.aspx.cs"
|
|
Inherits="utility_DatePicker" %>
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head runat="server">
|
|
<title>日期挑選</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
|
<script type="text/JavaScript" src="./CSJSRequestObject.js"></script>
|
|
|
|
<style type="text/css">
|
|
td.cell {
|
|
font-family: Courier;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
td.title {
|
|
font-family: Courier;
|
|
font-weight: bold;
|
|
color: Black;
|
|
background-color: #9DCBFA;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.b1 {
|
|
height: 24px;
|
|
width: 24px;
|
|
font: 11pt Arial;
|
|
cursor: pointer;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/JavaScript">
|
|
//-- Script designed by Liming Weng (victorwon@netease.com)
|
|
//-- Download this script and many more at
|
|
//-- The Java Magician!! http://javamagic.hypermart.net
|
|
var gdCtrl = new Object();
|
|
var gcGray = "#808080";
|
|
var gcToggle = "#ffff00";
|
|
var gcBG = "#cccccc";
|
|
|
|
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("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月");
|
|
|
|
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)
|
|
{
|
|
gdCtrl.value = iYear + separator
|
|
+ (("0" + iMonth).length == 2 ? ("0" + iMonth) : iMonth) + separator
|
|
+ (("0" + iDay).length == 2 ? ("0" + iDay) : iDay);
|
|
|
|
if (Request.QueryString("SENDER") != "")
|
|
{
|
|
if (false && window.showModalDialog)
|
|
{
|
|
parent.document.getElementById(Request.QueryString("SENDER")).value = gdCtrl.value;
|
|
parent.document.getElementById(Request.QueryString("SENDER")).focus();
|
|
fCancel();
|
|
}
|
|
else
|
|
{
|
|
window.returnValue = gdCtrl.value;
|
|
if (window.opener)
|
|
{
|
|
window.opener.document.getElementById(Request.QueryString("SENDER")).value = gdCtrl.value;
|
|
window.opener.document.getElementById(Request.QueryString("SENDER")).focus();
|
|
}
|
|
window.close();
|
|
}
|
|
}
|
|
else
|
|
{
|
|
if (false && window.showModalDialog)
|
|
{
|
|
parent.postMessage(gdCtrl.value);
|
|
fCancel();
|
|
}
|
|
else
|
|
{
|
|
window.opener.postMessage(gdCtrl.value);
|
|
window.close();
|
|
}
|
|
}
|
|
}
|
|
|
|
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);
|
|
|
|
// BHRD
|
|
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 WeekDay = new Array("日", "一", "二", "三", "四", "五", "六");
|
|
var styleTD = " bgcolor='" + gcBG + "' width='" + iCellWidth + "' "
|
|
+ " style='font-size:" + iDateTextSize + "pt;'";
|
|
|
|
with (document)
|
|
{
|
|
write("<tr>");
|
|
for (i = 0; i < 7; i++)
|
|
write("<td class='title' " + styleTD + ">" + WeekDay[i] + "</td>");
|
|
write("</tr>");
|
|
|
|
for (w = 1; w < 7; w++)
|
|
{
|
|
write("<tr>");
|
|
for (d = 0; d < 7; d++)
|
|
{
|
|
write("<td class='cell' id=calCell " + styleTD + "' name='calCell' "
|
|
+ " onMouseover='this.bgColor=gcToggle;' onMouseout='this.bgColor=gcBG;' "
|
|
+ " onclick='fSetSelected(this);'>");
|
|
write("<span name='calText' id='calText'></span>");
|
|
write("</td>")
|
|
}
|
|
write("</tr>");
|
|
}
|
|
}
|
|
}
|
|
|
|
function SetCellBgColor(cell, sType)
|
|
{
|
|
switch (sType)
|
|
{
|
|
case ".": // 無資料
|
|
if (d == 0 || d == 6)
|
|
cell.style.backgroundColor = "#FF99CC";
|
|
else
|
|
cell.style.backgroundColor = "#FFFFFF";
|
|
break;
|
|
case "-": // 上班日
|
|
cell.style.backgroundColor = "#FFFFFF";
|
|
break;
|
|
case "N": // 國定假日或民俗假日
|
|
cell.style.backgroundColor = "#0099FF";
|
|
break;
|
|
case "H": // 例假日
|
|
cell.style.backgroundColor = "#FF99CC";
|
|
break;
|
|
case "V": // 彈性休假
|
|
cell.style.backgroundColor = "#FF9900";
|
|
break;
|
|
case "B": // 補班
|
|
cell.style.backgroundColor = "#FFFF99";
|
|
break;
|
|
case "O": // 補假
|
|
cell.style.backgroundColor = "#99CC00";
|
|
break;
|
|
case "T": // 颱風假
|
|
cell.style.backgroundColor = "#999999";
|
|
break;
|
|
case "E": // 選舉假
|
|
cell.style.backgroundColor = "#CC7FFF";
|
|
break;
|
|
}
|
|
}
|
|
|
|
|
|
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++)
|
|
{
|
|
var calText = document.getElementsByName("calText")[(7 * w) + d];
|
|
var calCell = document.getElementsByName("calCell")[(7 * w) + d];
|
|
|
|
calText.Victor = i++;
|
|
if (myMonth[w + 1][d] < 0)
|
|
{
|
|
calText.color = gcGray;
|
|
calText.innerHTML = -myMonth[w + 1][d];
|
|
calCell.style.cursor = "default";
|
|
calCell.style.backgroundColor = gcBG;
|
|
}
|
|
else
|
|
{
|
|
var sDateData = myMonth[w + 1][d].split(",");
|
|
var sType = sDateData.length > 1 ? sDateData[1] : "";
|
|
calText.innerHTML = sDateData[0];
|
|
calText.color = "black";
|
|
calCell.style.cursor = "pointer";
|
|
SetCellBgColor(calCell, sType);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
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()
|
|
{
|
|
if (false && window.showModalDialog)
|
|
{
|
|
parent.document.getElementById(Request.QueryString("SENDER")).focus();
|
|
var datepicker = parent.document.getElementById("DatePicker");
|
|
datepicker.style.top = 0;
|
|
datepicker.style.left = 0;
|
|
datepicker.style.width = 0;
|
|
datepicker.style.height = 0;
|
|
}
|
|
else
|
|
{
|
|
window.opener.document.getElementById(Request.QueryString("SENDER")).focus();
|
|
window.returnValue = "";
|
|
window.close();
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body bgcolor="#6699cc" style="margin: 0px">
|
|
<form id="form1" runat="server">
|
|
<div id="content" align="center" style="vertical-align: middle">
|
|
<table border='0' bgcolor='#6699cc'>
|
|
<tr>
|
|
<td valign='middle' align='center'>
|
|
<table id='popTable' border='0' bgcolor='#6699cc'>
|
|
<tr>
|
|
<td valign='middle' align='center'>
|
|
<!--年度輸入-->
|
|
<input type='button' value='<' name='PrevYear' id='PrevYear'
|
|
onclick='fPrevYear()' disabled="disabled" class="b1" />
|
|
<input type='text' name='tbSelYear' id='tbSelYear' onkeydown='fUpdateCal(tbSelYear.value, tbSelMonth.value);'
|
|
style='width: 3.5rem; font: 11pt Arial; border-style: groove'
|
|
runat="server" maxlength="4" />
|
|
<input type='button' value='>' name='NextYear' id='NextYear'
|
|
onclick='fNextYear()' disabled="disabled" class="b1" />
|
|
<!-- 月份挑選 -->
|
|
<input type='button' name='PrevMonth' id='PrevMonth' disabled="disabled"
|
|
value='<' class="b1" onclick='fPrevMonth()' />
|
|
<select name='tbSelMonth' id='tbSelMonth' onchange='fUpdateCal(tbSelYear.value, tbSelMonth.value)'
|
|
style='width: 4.5rem; height: auto; font: 11pt Arial; border-style: groove'>
|
|
|
|
<script type="text/javascript">
|
|
for (i = 0; i < 12; i++)
|
|
document.write("<option value='" + (i + 1) + "'>" + gMonths[i] + "</option>");
|
|
</script>
|
|
|
|
</select>
|
|
<input type='button' name='NextMonth' id='NextMonth' disabled="disabled"
|
|
value='>' class="b1" onclick='fNextMonth()' />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td align='center'>
|
|
<div style='background-color: teal;'>
|
|
<table width="100%" border="1" cellpadding="2" cellspacing="0" style="border-color: black; border-collapse: collapse;">
|
|
|
|
<script type="text/javascript">
|
|
fDrawCal(giYear, giMonth, 19, 12);
|
|
</script>
|
|
|
|
</table>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td align='center'>
|
|
<input type='button' name='Close' value='關閉' onclick='fCancel()'
|
|
class="b1" style="width: auto; height: auto; padding-left: 5px; padding-right: 5px;" />
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<script type="text/javascript">
|
|
var CY11 = 0;
|
|
if (Request.QueryString("CY11"))
|
|
CY11 = parseInt(Request.QueryString("CY11"), 10);
|
|
|
|
// alert(Request.QueryString("SENDER"))
|
|
|
|
if (Request.QueryString("SENDER") != "" && Request.QueryString("SENDER") != "undefined" && Request.QueryString("SENDER") != "null")
|
|
{
|
|
var oldDate = "";
|
|
|
|
if (false && window.showModalDialog)
|
|
oldDate = parent.document.getElementById(Request.QueryString("SENDER")).value;
|
|
else if (window.opener)
|
|
oldDate = window.opener.document.getElementById(Request.QueryString("SENDER")).value;
|
|
|
|
if (oldDate != "")
|
|
{
|
|
if (separator != "")
|
|
while (oldDate.indexOf(separator) != -1)
|
|
oldDate = oldDate.replace(separator, "");
|
|
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);
|
|
}
|
|
}
|
|
|
|
if (Request.QueryString("VALUE") != "" && Request.QueryString("VALUE") != "undefined" && Request.QueryString("VALUE") != "null")
|
|
{
|
|
var oldDate = Request.QueryString("VALUE").toString();
|
|
if (oldDate != "")
|
|
{
|
|
if (separator != "")
|
|
while (oldDate.indexOf(separator) != -1)
|
|
oldDate = oldDate.replace(separator, "");
|
|
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);
|
|
}
|
|
}
|
|
|
|
var tbSelYear = document.getElementById("tbSelYear");
|
|
var tbSelMonth = document.getElementById("tbSelMonth");
|
|
var PrevYear = document.getElementById("PrevYear");
|
|
var NextYear = document.getElementById("NextYear");
|
|
var PrevMonth = document.getElementById("PrevMonth");
|
|
var NextMonth = document.getElementById("NextMonth");
|
|
tbSelYear.value = giYear - CY11;
|
|
tbSelMonth.value = giMonth;
|
|
fUpdateCal(tbSelYear.value, tbSelMonth.value);
|
|
window.returnValue = "";
|
|
</script>
|
|
|
|
</div>
|
|
</form>
|
|
</body>
|
|
</html>
|