カレンダーによる日付入力スクリプト
2003.1.26〜1.30までの期間 このページの.jsファイルをレイヤー版のものと間違えて置いてしまいました。
この間にダウンロードされた方は動作しないと思いますので、お手数ですが新しいファイルをご利用ください。(_ _b すみません。
→[ 新 ] レイヤー版
HTMLサンプル
<html>
<head>
ここへ下記の「カレンダーによる日付入力スクリプト」ソースを張り込むか
または、
<script src="calendar.js" language="JavaScript"></script>
をペーストしてcalendar.jsを読み込む。
</head>
<body>
<form name=f1>
受付日:<input name="e1" type="text"
onFocus="wrtCalendar(this,event)"><br>
登録日:<input name="e2" type="text"
onFocus="wrtCalendar(this,event)"><br>
入金日:<input name="e3" type="text"
onFocus="wrtCalendar(this,event)"><br>
<br><br>
作業日:<input name="e4" type="text">
<input type="button"
value="入力用カレンダー"
onclick="wrtCalendar(this.form.e4,event)"> ボタンクリックで表示
<br><br>
<input type="image" src="./cal1.gif"
value="入力用カレンダー"
onclick="wrtCalendar(this.form.e5);return false">
<input name="e5" type="text">
</form>
</body>
</html>
*日付を自動入力したいINPUT入力タグの中へonFocus="wrtCalendar(this)"を
ペーストします。INPUT入力タグのNAME属性は何でも良いですが、それぞれのタグに必ず違う名前 ( ここではe1,e2,e3 ) を忘れずに付けて
おいてください。
*作業日のサンプルのように自動入力したい場所とカレンダーの起動場所が違う場合は、 wrtCalendar(入力したいフォームのエレメントオブジェクト) の形式で
自動入力先を指定します。
動作確認済み環境 ○-OK ×-NO △-おしい^^; 未-未チェック
| マシン |
Netscape |
IE |
他 |
| Win Me |
○NN3.04[en] |
○NN4.7[ja] |
○NN6.2 |
○IE4(4.72.3110.1) |
○IE5(5.00.2014.0216) |
○IE6(6.0.2600.0000) |
| Win 98 |
○NN3.04[en] |
○NN4.7[ja] |
○NN6.2 |
○IE4(4.72.3110.1) |
○IE5(5.00.2014.0216) |
○IE6(6.0.2600.0000) |
| Mac PPC |
|
○NN4.5[ja] |
○NN6.2 |
○IE4.5 |
○IE5.0 |
|
| Linux |
|
△NN4.08[en] |
○NN6.2 |
|
|
*動作報告いただけるとうれしいです。
更新記録
2002.2.22 (再)「＞＞」クリックした時に当日の日が翌月に存在しない場合に翌月カレンダーがおかしくなる(Thanx TEC関さん)
2002.2.21 「＞＞」クリックした時に当日の日が翌月に存在しない場合に翌月カレンダーがおかしくなる(Thanx TEC関さん)
2002.2.21 Moz用サイズ微調整
2002.1.28 1月時の前月と12月時の来月グレー日付をクリックで当年の出力になっていたのを修正(Thanx 吉野理希さん)
2001.12.28 今月へ戻る「O」ボタンでエラーが出ていたのを修正 ( for WinIE6.0 )
JavaScript ソース
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
/*--カレンダーによる日付入力スクリプトここから--*/
/********************************************************************
* カレンダーによる日付入力スクリプト
*
* ( 下記スクリプトは改造も可能ですがまったくいじらずにそのままペース
* トするだけでもご利用いただけるように書いてあります )
*
* Syntax : wrtCalendar( formElementObject[,moveMonthFlg][,winOpenFlg] )
* 例 : wrtCalendar( this )
*
* 使いたいINPUT入力タグにonFocus="wrtCalendar(this)"を ペーストし
* ます。それぞれのタグに違う名前(NAME属性)を忘れずに付けておいてく
* ださい。
*
* Example :受付日:<INPUT NAME=e1 TYPE=text
* onFocus="wrtCalendar(this)">
*
* ------------------------------------------------------------------
* calendar.js Copyright(c)1999 Toshirou Takahashi tato@fureai.or.jp
* Support http://www.fureai.or.jp/~tato/JS/BOOK/INDEX.HTM
* ------------------------------------------------------------------
*/
var now = new Date()
var absnow = now
var Win=navigator.userAgent.indexOf('Win')!=-1
var Mac=navigator.userAgent.indexOf('Mac')!=-1
var X11=navigator.userAgent.indexOf('X11')!=-1
var Moz=navigator.userAgent.indexOf('Gecko')!=-1
var winflg=1
function wrtCalendar(oj,event,arg1,arg2){
oj.blur()
if(!arguments[2])arg1=0
if(!Moz)
if(arguments[1]||arguments[1]==0)winflg=0
//-初期化
if(arg1==0)now = new Date()
//-年月日取得
nowdate = now.getDate()
nowmonth = now.getMonth()
nowyear = now.getYear()
//-月移動処理
if(nowmonth==11 && arg1 > 0){ //12月でarg1が+なら
nowmonth = -1 + arg1 ; nowyear++ //月はarg1-1;1年加算
} else if(nowmonth==0 && arg1 < 0){ //1月でarg1が-なら
nowmonth = 12 + arg1 ; nowyear-- //月はarg1+12;1年減算
} else {
nowmonth += arg1 //2-11月なら月は+arg1
}
//-2000年問題対応
if(nowyear<1900)nowyear=1900+nowyear
//-現在月を確定
now = new Date(nowyear,nowmonth,1)
//-YYYYMM作成
nowyyyymm=nowyear*100+nowmonth
//-YYYY/MM作成
nowtitleyyyymm=nowyear+'/'+(nowmonth + 1)
//-週設定
week = new Array('日','月','火','水','木','金','土');
//-カレンダー構築用基準日の取得
fstday = now //今月の1日
startday = fstday - ( fstday.getDay() * 1000*60*60*24 ) //最初の日曜日
startday = new Date(startday)
//-カレンダー構築用HTML
ddata = ''
ddata += '<HTML>\n'
ddata += '<HEAD>'
if(!Moz)
ddata += '<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=x-sjis">\n'
ddata += '<TITLE>Auto Input Calendar</TITLE>\n'
ddata += '<STYLE>\n'
ddata += ' BODY { font:12px ; line-height:12px ; margin : 7px }\n'
ddata += ' TH { font:12px ; line-height:12px ; font-weight : 900 }\n'
ddata += ' TD { font:12px ; font-family : Arial; line-height:12px }\n'
ddata += ' A { text-decoration:none;color:#000000;font:10px;font-family:Arial;line-height:12px }\n'
ddata += ' INPUT { font:10px ; font-family : Arial ; line-height:10px ; padding:0px}\n'
ddata += '</STYLE>\n'
ddata += '</HEAD>\n'
ddata += '<BODY BGCOLOR=#dddddd>\n'
ddata += '<FORM>\n'
ddata += '<TABLE BORDER=0 BGCOLOR=#dddddd BORDERCOLOR=#dddddd WIDTH=140 HEIGHT=140>\n'
//-MONTH
ddata += ' <TR id="trmonth" BGCOLOR=orange BORDERCOLOR=orange WIDTH=140 HEIGHT=14>\n'
ddata += ' <TH COLSPAN=7 WIDTH=140 HEIGHT=14 ALIGN="right"><NOBR>\n'
ddata += nowtitleyyyymm
ddata += ' <INPUT TYPE=button VALUE="<<" onClick="self.opener.wrtCalendar(self.opener.document.'+oj.form.name+'.'+oj.name+',-1,0)">\n'
ddata += '<INPUT TYPE=button VALUE="o" onClick="self.opener.wrtCalendar(self.opener.document.'+oj.form.name+'.'+oj.name+',0,0)">\n'
ddata += '<INPUT TYPE=button VALUE=">>" onClick="self.opener.wrtCalendar(self.opener.document.'+oj.form.name+'.'+oj.name+',1,0)">\n'
ddata += '</NOBR></TH>\n'
ddata += ' </TR>\n'
//-WEEK
ddata += ' <TR BGCOLOR=pink WIDTH=140 HEIGHT=14>\n'
for (i=0;i<7;i++){
ddata += ' <TH WIDTH=14 HEIGHT=14>\n'
ddata += week[i]
ddata += ' </TH>\n'
}
ddata += ' </TR>\n'
//-DATE
for(j=0;j<6;j++){
ddata += ' <TR BGCOLOR=#ffffff>\n'
for(i=0;i<7;i++){
nextday = startday.getTime() + (i * 1000*60*60*24)
wrtday = new Date(nextday)
wrtdate = wrtday.getDate()
wrtmonth= wrtday.getMonth()
wrtyear = wrtday.getYear()
if(wrtyear < 1900)wrtyear=1900 + wrtyear
wrtyyyymm = wrtyear * 100 + wrtmonth
wrtyyyymmdd= ''+wrtyear +'/'+ (wrtmonth+1) +'/'+wrtdate
wrtdateA = '<A HREF="javascript:function v(){self.opener.document.'+oj.form.name+'.'+oj.name+'.value=(\''+wrtyyyymmdd+'\');self.close()};v()" '
wrtdateA += '>\n'
wrtdateA += '<FONT COLOR=#000000>\n'
wrtdateA += wrtdate
wrtdateA += '</FONT>\n'
wrtdateA += '</A>\n'
if(wrtyyyymm != nowyyyymm){
ddata += ' <TD BGCOLOR=#cccccc WIDTH=14 HEIGHT=14>\n'
ddata += wrtdateA
} else if(wrtdate == absnow.getDate() && wrtmonth == absnow.getMonth() && wrtday.getYear() == absnow.getYear()){
ddata += ' <TD BGCOLOR=magenta WIDTH=14 HEIGHT=14>\n'
ddata += '<FONT COLOR="#ffffff">'+wrtdateA+'</FONT>\n'
} else {
ddata += ' <TD WIDTH=14 HEIGHT=14>\n'
ddata += wrtdateA
}
ddata += ' </TD>\n'
}
ddata += ' </TR>\n'
startday = new Date(nextday)
startday = startday.getTime() + (1000*60*60*24)
startday = new Date(startday)
}
//-mac用クローズボタン
if(Mac){
ddata += ' <TR>\n'
ddata += ' <TD COLSPAN=7 ALIGN=center>\n'
ddata += ' <INPUT TYPE=button VALUE="CLOSE" onClick="self.close();return false">\n'
ddata += ' </TD>\n'
ddata += ' </TR>\n'
}
ddata += '</TABLE>\n'
ddata += '</FORM>\n'
ddata += '</BODY>\n'
ddata += '</HTML>\n'
calendarwin.document.write(ddata)
calendarwin.document.close()
calendarwin.focus()
winflg=1
}
/********************************************************************
* 簡易サブウインドウ開き
* Syntax : GRS_mkSubWin(URL,winName,x,y,w,h)
* 例 : GRS_mkSubWin(winIndex,'test.htm','win0',100,200,150,300)
* ------------------------------------------------------------------
*/
var calendarwin;
function GRS_mkSubWin(URL,winName,x,y,w,h){
var para =""
+" left=" +x
+",screenX=" +x
+",top=" +y
+",screenY=" +y
+",toolbar=" +0
+",location=" +0
+",directories=" +0
+",status=" +0
+",menubar=" +0
+",scrollbars=" +0
+",resizable=" +1
+",innerWidth=" +w
+",innerHeight=" +h
+",width=" +w
+",height=" +h
calendarwin=window.open(URL,winName,para);
calendarwin.focus()
}
/*--カレンダーによる日付入力スクリプトここまで--*/
//-->
</SCRIPT>