SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [日付簡単入力カレンダー]

日付簡単入力カレンダー

機能

テキストボックスに日付入力をする手段を提供するものです。ボタンをクリックするとカレンダーを開き、日付を選択することができます。

実用上にはもう少し改良点がありますが、これは使用者の方々にお任せいたします。

利用方法

カレンダーは別ファイルとなっています。これはそのまま使用します。

日付入力させたいフォームのname属性を「frm」、テキストボックスのname属性を「Day」とします（カレンダー側のスクリプトを変えてもＯＫです）。カレンダーを開かせたいボタンにonclick属性で「window.open('sp69_0.html','CAL','width=450,height=400,menubar')」を指定します。

改造方法

特になし。独自で改良願います。

対応ブラウザ

IE5,6(IE4),N6

サンプル

［サンプルを見る］［ダウンロード］

ソース(メイン「sp69.html」)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>日付簡単入力カレンダー</title>
</head>

<body>

<form name="frm">
	<input type="text" name="Day">
	<input type="button" value="Calendar"
		onclick="window.open('sp69_0.html','CAL','width=450,height=400,menubar')">
</form>

</body>
</html>

ソース(カレンダー「sp69_0.html」)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Calendar</title>

<script language="JavaScript">
<!--
var Monthdays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var date = new Date();
var Year = date.getYear();
var Month = date.getMonth() + 1;
var Youbi = date.getDay(date.setDate(1));

if(Year < 2000){
	Year += 1900;
}
if((Year%4 == 0) && (Year%100 != 0) || (Year%400 == 0)){
	Monthdays[1] = 29;
}

document.write("<form>");
document.write("<div style='font-size:2em;text-align:center'\
				>" + Year + "." + Month);
document.write("<table border='1'");
for (i = (1 - Youbi); i <= Monthdays[ Month - 1 ]; i += 7){
	document.write("<tr>");
	k = 0;
	for(j = i; j < i + 7; j++){
		k++;
		if((j > 0) && (j <= Monthdays[ Month - 1 ])){
			if(k == 1){
				document.write('<td><input type="button"\
 				onclick="WrtDay(' + j + ');"\
 				style="width:2em;font-size:1.5em;color:red;background-color:#ccc"\
 				value="' + j + '"></td>');
			}else if(k == 7){
				document.write('<td><input type="button"\
 				onclick="WrtDay(' + j + ');"\
 				style="width:2em;font-size:1.5em;color:blue;background-color:#ccc"\
 				value="' + j + '"></td>');
			}else{
				document.write('<td><input type="button"\
 				onclick="WrtDay(' + j + ');"\
 				style="width:2em;font-size:1.5em;color:black;background-color:#ccc"\
 				value="' + j + '"></td>');
			}
		}else{
			document.write("<td> </td>");
		}
	}
	document.write("</tr>");
}
document.write("</table>");
document.write("<input type='button' onclick='window.close();'value=' CLOSE '>");
document.write("</div></form>");

function WrtDay(Day){
	window.opener.document.frm.Day.value = Year + "/" + Month + "/" + Day;
	window.close();
}

// -->
</script>


</head>

<body>

</body>
</html>

[Go To Top]