- HOME >
- JavaScript >
- カレンダーで日付の入力補助をする
カレンダーで日付の入力補助をする
フォーム等で日付を選択する場合に、カレンダーから選択することが出来るようにするJavaScriptです。カレンダーから選択出来る事で、ユーザーは曜日等が分かりやすくなる利点や、その他にも日付の間違い（2月31日は存在しない）等を減らすことが出来るようになります。
次世代のHTML（HTML5）からは、標準でHTMLのタグでカレンダーの機能を実現出来るようですが、HTML5が普及するまでにはまだ時間が掛かると思いますので、JavaScriptによるカレンダーで日付の入力補助をする機能は必要になると思います。
ご利用について
個人利用の場合はフリーでご自由にお使いいただけます。
法人・商用利用の場合はWEB上手(www.web-jozu.com)へのリンクを貼ってください。
個人利用の場合でもリンクを貼っていただけると、幸いです。
法人・商用利用の方でリンクを貼っていただけない場合や、カレンダー内のリンクをはずす場合はシェアウェア料金をお支払いいただくことで、ご自由にお使いいただけます。料金は以下のページよりお支払いいただけます。
※著作権は放棄していません。詳細はご利用規定をご覧ください。
【料金】 ￥1,000 （税込）
シェアウェアのお支払いはこちら （ クレジット決済のみ ）
ダウンロードおよび設置方法
カレンダーで日付の入力補助の必要ファイルのダウンロード （4KB）
※ご利用規定に同意出来る方のみご利用ください。
- 日付をカレンダーで選択出来ることで、分かりやすくなります。
- 完全にカレンダーからのみの選択にすることで、入力内容の統一化が図れます。
- 現在の日付をわかりやすく表示します。
- 日本の祝日表示にも対応しています。マウスオーバーで祝日名を表示します。
特長
- まずはカレンダーで日付の入力補助の必要ファイルをダウンロードします。
- 「ディレクトリ構成」に従って「calen_input」フォルダをアップロードしてください。
「カレンダーの選択」にカレンダー画像を使用する場合は、
「ico_calen.gif」のみ「バイナリ」、その他は「アスキー」でアップロードします。 - 「記述」に従ってカレンダーを設置したいページに記述します。
- フォームのname属性は「calender.js」の「設定領域」でそれぞれ指定してください。
デフォルトではフォーム名は「test」、年は「yy」、月は「mm」、日は「dd」です。 - 「カレンダーの選択」にカレンダー画像を使用する場合は、
「calender.css」の「calenPopup」クラスの「left:」を「18px」、「top:」を「1px」に変更します。 - 「サンプル」のように、カレンダーが表示されれば完成です。
home- ├
index.html （カレンダー日付入力補助設置ページ） - └ calen_input
- ├ calendar.css
- └ calendar.js
- └
（ico_calen.gif）カレンダー画像を使用する場合
<html>
<head>
<title>カレンダー日付入力補助設置ページ</title>
<link rel="stylesheet" type="text/css" href="calen_input/calendar.css">
</head>
<body>
<span style="display:block; float:left;">フォーム</span>
<span style="position:relative; display:block; float:left;">
<a href="javascript:viewCalen(theMonth); void(0);">カレンダーから選択</a>
<span id="calenArea"></span>
</span><br style="clear:both;" />
<script type="text/javascript" src="calen_input/calendar.js"></script>
</body>
</html>
更新履歴
| 2011/03/05 ver1.0.2 | ・国民の祝日の不具合を修正しました。 ・カレンダーからマウスが離れてから、 カレンダーが閉じるまでの時間を設定出来るようにしました。 |
|---|
| 2009/05/02 ver1.0.1 | ・カレンダーを前後何ヶ月表示するかを指定出来るようにしました。 |
|---|
| 2008/12/03 ver1.0.0 | ・土、日、祝日の文字の色がグレーになっていたので、 「calendar.css」を修正しました。 |
|---|
| 2008/11/30 ver1.0.0 | ・新規公開 |
|---|
関連記事
こちらの記事も読まれています
