カレンダーの表示＆日付を選択できるjavascript「CalendarPopup.js」

フォームで日付を入力してもらうことがあると思います。
しかし人によって入力の仕方が違ったり、望んでいない過去の日付などを指定される場合があります。
Matt KruseのCalendar Popupではポップアップ表示したカレンダーのクリックした日付をフォームに表示することができます。
さらに指定した期間の日付表示も可能です。

使用方法
Calendar PopupのSourceからCalendarPopup.jsをダウンロードします。
このファイルと以下のscriptをhead内に書き込みます。
<script type="text/javascript">
var cal = new CalendarPopup();
</script>
またHTMLのformには以下のように記入します。
<form name="formの名前">
<input type="text" name="textの名前" value="" size=15>
<a href="#"
onclick="cal.select(document.forms['formの名前'].textの名前,'アンカーの名前','yyyy/MM/dd/'); return false;"
name="アンカーの名前" id="アンカーの名前">カレンダー</a>
</form>
＊yyyy/MM/ddは日付のフォーマットです。
サンプルでは2007/10/12のような表記になります。

また、選択できない日付を指定するにはcal.addDisabledDates("12/25/2007");とします。
これで2007年12月25日は選択できません。
さらに、cal.addDisabledDates("Jan 15, 2008",null);とすることで2008年1月15日以降が選択不可能になります。
なお、今日以前を選択不可能にするには
var now = new Date();
cal.addDisabledDates(null,formatDate(now,"yyyy-MM-dd"));
とします。
結果はカレンダーの表示＆日付を選択できるjavascript「CalendarPopup.js」サンプルを見てください。

2007年07月20日

前の記事：Movable Typeで使用している画像を表示するプラグイン「EntryImages」
次の記事：艶やかで立体的な画像を作成するjavascript「Glossy.js」

関連記事

• 超クールなカレンダーjavascript「Calendar」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• フォームで全自動でフリガナを付与するJavaScript「AutoKana.js」
• [jQuery]Confirm

• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」
• レイヤー表示（？）JavaScript「jParallax」
• スクロールしてもついてくる！のJavaScript「jQuery Scroll Follow」