日付入力機能付きカレンダー
カレンダー内の日付にはリンクをつけ、リンク先の関数では、コール元の年・月・日に値を設定します。
<![CDATA[
var aTag = "<a href='JavaScript;setDate(" + year + "," + month + "," + i +");'>"
・
・
・
function setDate(year, month, day) {
opener.document.form.year.value = year;
opener.document.form.month.value = month;
opener.document.form.day.value = day;
window.close();
}
]]>
全ソース
（メインプログラム）
<![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>カレンダーの表示</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript" src="../dateUtil.js"></script>
<SCRIPT type=text/javascript>
<!--
function openCalendar() {
cal = window.open("calendar_3.htm", "", "width=200, height=200");
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF" leftmargin="8" topmargin="8" marginwidth="0" marginheight="0">
<center>
カレンダー内の日付をクリックすると、<br>
カレンダーの表示画面が閉じられると同時に、<br>
選択した日付が入力フォームにセットされます。<br><br>
<form name="form">
<SCRIPT type=text/javascript>
<!--
document.write("<select name='year'>\n");
for (i=2000; i<2011; i++) {
document.write("<option value='" + i + "'>" + i + "</option>\n");
}
document.write("</select>\n");
document.write("年\n");
document.write("<select name='month'>\n");
for (i=1; i<13; i++) {
document.write("<option value='" + i + "'>" + i + "</option>\n");
}
document.write("</select>\n");
document.write("月\n");
document.write("<select name='day'>\n");
for (i=1; i<32; i++) {
document.write("<option value='" + i + "'>" + i + "</option>\n");
}
document.write("</select>\n");
document.write("日\n");
//-->
</SCRIPT>
<input type="button" value="カレンダー" onClick="JavaScript:openCalendar();">
</form>
</center>
</BODY>
</HTML>
]]>
（カレンダープログラム）
<![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>カレンダーの表示</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style media="screen" type="text/css">
<!--
/* font base */
td {font:normal bold 10pt/12pt; text-align:center;
background-color:#F5F5F5; padding:0pt 0pt 0pt 0pt;
border:solid #999999; border-width:0pt 0pt 1.5pt 1pt;}
td#holiday {background-color:#FF69B4;}
td#sat {background-color:#87CEFA;}
a {text-decoration:none;}
a:link {color:#000000;}
a:active {color:#000000;}
a:visited {color:#000000;}
a:hover {color:#000000;}
/* content base */
.con_a {color:#000000;}
.con_sun {color:#FF0000;}
.con_sat {color:#0000FF;}
.con_month {color:#000000;}
/* border base */
.bor_a {border:solid #999999; border-width:1pt 2pt 1pt 1pt;}
-->
</style>
<script language="JavaScript" src="../dateUtil.js"></script>
<SCRIPT type=text/javascript>
<!--
window.moveTo(0, 0);
function showCalendar(year, month) {
var date = new Date(year, (month-1), 1);
if (isNaN(date)) {
var date = new Date();
}
year = date.getFullYear();
month = date.getMonth()+1;
var monthdays=new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var days=new Array("日", "月", "火", "水", "木", "金", "土");
today=new Date().getDate();
// 年、うるう年の設定
if(((year%4==0)&&(year%100!=0))||(year%400==0)) {
monthdays[1]=29;
}
//前月、翌月のリンクボタン
document.write("<table border='0' cellspacing='0' cellpadding='0' class='bor_a'>");
document.write("<tr><td colspan='2' class='con_month'>");
document.write("<input type='button' name='backButton' class='button_a'
value='前月' onClick='JavaScript:moveMonth(year, month, -1);'></td>");
document.write("<td colspan='3' class='con_month'>");
document.write(year + "年" + month + "月</td>");
document.write("<td colspan='2' class='con_month'>");
document.write("<input type='button' name='backButton' class='button_a'
value='翌月' onClick='JavaScript:moveMonth(year, month, 1);'>");
document.write("</td></tr>");
//曜日の設定
document.write("<tr>");
for(i=0; i<7; i++) {
if(i==0) {
document.write("<td class='con_sun'>" + days[i] + "</th>");
} else if(i==6) {
document.write("<td class='con_sat'>" + days[i] + "</th>");
} else {
document.write("<td class='con_a'>" + days[i] + "</th>");
}
}
document.write("</tr>")
thisMonthdays=monthdays[month-1]; //末日
date.setDate(1);
startDay=date.getDay(); //月始め
//月始めの空欄を出力
document.write("<tr>");
var col=0;
for(i=0; i<startDay; i++){
document.write("<td> </td>");
col++;
}
//当月分の出力
for(i=1; i<=thisMonthdays; i++) {
aTag = "<a href='JavaScript:setDate(" + year + "," + month + "," + i +");'>";
if(col==0) {
id = " id='holiday'";
document.write("<td class='con_sun' " + id + ">" + aTag + i + "</a></td>");
}else if(col==6) {
if (isHoliday(year, month, i)) {
id = " id='holiday'";
} else {
id = " id='sat'";
}
document.write("<td class='con_sat' " + id + ">" + aTag + i + "</a></td>");
} else {
if (isHoliday(year, month, i)) {
id = " id='holiday'";
} else {
id = "";
}
document.write("<td class='con_a' " + id + ">" + aTag + i + "</a></td>");
}
col++;
if(col==7) {
document.write("</tr>\n<tr>");
col=0;
}
}
//月末の空欄を出力
for(; col<7; col++){
document.write("<td> </td>");
}
document.write("</tr>");
document.write("<tr><td colspan='7' class='con_month'>");
today = new Date();
document.write("本日は" + today.getFullYear() + '年'
+ (today.getMonth()+1) + '月'+ new Date().getDate() + "日です");
document.write("</td></tr>");
document.write("</table>");
}
/*--------------------------------------------
次月の年･月を、Formにセットする
引数 _year:年
_month:月
_adjust:次月との差分(月数)
---------------------------------------------*/
function moveMonth(_year, _month, _adjust) {
var year = parseInt(_year, 10);
var month = parseInt(_month, 10);
var adjust = parseInt(_adjust, 10);
month = eval(month + adjust);
year = (month > 12 ? eval(year + 1) : year);
year = (month < 1 ? eval(year - 1) : year);
month = (month > 12 ? 1 : month);
month = (month < 1 ? 12 : month);
opener.document.form.year.value = year;
opener.document.form.month.value = month;
window.close();
opener.document.form.year.value = year;
opener.document.form.month.value = month;
opener.openCalendar();
}
/*--------------------------------------------
親ウィンドウに日付設定する
---------------------------------------------*/
function setDate(year, month, day) {
opener.document.form.year.value = year;
opener.document.form.month.value = month;
opener.document.form.day.value = day;
window.close();
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF" leftmargin="8" topmargin="8" marginwidth="0" marginheight="0">
<SCRIPT type=text/javascript>
<!--
year = opener.document.form.year.value;
month = opener.document.form.month.value;
showCalendar(year, month);
//-->
</SCRIPT>
</BODY>
</HTML>
]]>
