カレンダーによる日付入力補助｜Javascript

日付入力補助／サンプル

こちらの意図した書式で入力してもらいたいとき、あるいはユーザーの入力を簡易にするため、カレンダーを表示して日付をクリックするとテキストボックスにセットされます。
手入力もできますので、日付チェックのスクリプトもあわせて使用すると良いでしょう。
日付チェックはこちらを参照してください。

これはToshirou Takahashi氏作成のスクリプトを元に自分の使い勝手の良いように改造したものです。原本は http://www.fureai.or.jp/~tato/JS/BOOK/INDEX.HTM

ダウンロード

calendar.txt
上記calendar.txtをダウンロードし、拡張子を「js」に書き換えてください。
calendar.txt -> calendar.js

改造内容

NSの場合もクリックしたそばにウィンドウ表示されるようにする
スクリーンの上にでる場合は下に、スクリーン右に出る場合は左に表示されるようにする
カラーのカスタマイズを簡易（変数化）にする
月移動だけでなく、年移動もできるようにする
土日祝祭日の背景色を変えるようにする・・・春分の日・秋分の日・国民の休日にも対応
マウスオーバーで祝日名を表示するようにする
戻り値の年月日の書式指定を可能にする

概要

ボタンをクリックするとカレンダーが開きます。
カレンダーウインドウの日付をクリックすると自動的に入力欄へ日付が入ります。
カレンダーはクリックした位置の右上に表示されます。
ウィンドウ上に出る場合は下に表示されます。
ウィンドウ右に出る場合は左に表示されます。
休祭日の背景を変えられます。またマウスを祭日に乗せると祭日名を表示します。
春分の日・秋分の日・国民の休日にも対応しています。
自動入力される日付の形式を指定できます。
カレンダーのカラーを簡単にカスタマイズできます。

設置方法

<head>と</head>の間にダウンロードしたソースの内容を貼り付けるか
<script src="calendar.js" language="JavaScript"></script> を書いて calendar.js を読み込む

書式設定

'g'	→	年号の頭文字を返します (M、T、S、H)
'gg'	→	年号の先頭の 1 文字を漢字で返します (明、大、昭、平)
'ggg'	→	年号を返します (明治、大正、昭和、平成)
'yy'	→	西暦の年を下 2 桁の数値で返します (00 ～ 99)
'yyyy'	→	西暦の年を 4 桁の数値で返します (100 ～ 9999)
'm'	→	月を表す数値を返します。1 桁の場合、先頭に 0 が付きません (1 ～ 12)
'mm'	→	月を表す数値を返します。1 桁の場合、先頭に 0 が付きます (01 ～ 12)
'd'	→	日付を返します。1 桁の場合、先頭に 0 が付きません (1 ～ 31)
'dd'	→	日付を返します。1 桁の場合、先頭に 0 が付きます (01 ～ 31)
'w'	→	曜日を英語 (省略形) で返します (Sun ～ Sat)
'ww	→	曜日を英語で返します (Sunday ～ Saturday)
'a	→	曜日を日本語 (省略形) で返します (日～土)
'aa	→	曜日を日本語で返します (日曜日～土曜日)

何も指定しなければ yyyy/mm/dd になります。

使用例

<form name="calendar"">
  <input type="text" name="p1" id="p1" size="30" maxlength="10"><input 
         name="Calendar" 
         type="button" value="日付セット" 
         onClick="wrtCalendar(event,this.form.p1,'yyyy/m/d')">
</form>

例1 : wrtCalendar(event,this.form.p1)
例2 : wrtCalendar(event,this.form.p1,'yyyy/mm/dd')
例3 : wrtCalendar(event,this.form.p1,'yyyy年m月d日(ww)')
例4 : wrtCalendar(event,this.form.p1,'gg年m月d日(aa)')
例5 : wrtCalendar(event,this.form.p1,'m/d')
例6 : wrtCalendar(event,this.form.p1,'mm/dd')

更新履歴

2007/04/05 007年祝日法改正に対応
2006/10/20 Mozilla （ネスケ、及び Firefox）で西暦がおかしくなるバグを修正
2006/10/04 体育の日、成人の日がある条件の場合のみおかしくなるバグを修正
2005/07/30 クリアボタンの表示、非表示を指定できるようにする
2005/07/19 クリア機能の追加
2005/07/19 年を過去にしていくと1898年以降がおかしくなるバグを修正
2004/06/22 Firefoxに対応

スポンサードリンク

Javascriptによる日付入力補助