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

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

使用方法
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」サンプルを見てください。

sponsors

「カレンダーの表示&日付を選択できるjavascript「CalendarPopup.js」」をシェアする

記事作成:
記事URL:

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