日本語OKの日付選択javascript「PBBDatePicker」

フォームで日付を選択してもらう際に便利な日付選択javascriptデートピッカー
デートピッカーを用いれば視覚的に年月はもちろん数年先の曜日も判明します。
PBBDatePickerでは、mootoolsベースのデートピッカーを公開しています。

使用方法

PBBDatePickerからpbbdatepicker.v1.1.jsをmootoolsからmootools.jsをダウンロードします。

<script src="http://yourdomain/mootools.js" type="text/javascript"></script>

<script src="http://yourdomain/pbbdatepicker.v1.1.js" type="text/javascript"></script>

<script type="text/javascript">

window.onload = function() {

                MyDatePicker = new PBBDatePicker($('id名'), {

                        dateFormat : 'd/m/Y',   //日付フォーマット（後述）

                        selectMinDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),  //今日以前を選択不可能に

                        iconImg : 'date.png',  //表示するカレンダー画像

                        onShow: function(picker){

                                picker.effects({duration: 500, transition: Fx.Transitions.quadInOut}).custom({'opacity': [0, 0.8]});  //カレンダー表示エフェクト

                        } 

                });

        }    

</script>

<link rel="stylesheet" href="mooDatePicker.css" type="text/css">

最後にinputのid属性として上記で記入したid名を付与します。
<input type="text" id="id名">

サンプル

Javascriptサンプルページ一覧

skuare.net

オプション

offsets：カレンダーを表示するinputからの距離
weekFirstDay：週の始めの曜日、 0 (日曜) - 6 (土曜)
dateFormat：日付のフォーマット (デフォルト、d/m/Y)
- d - 日付（2桁の場合0あり）
- D - 日付（英語3文字）
- j - 日付（2桁の場合に0なし）
- l - 日付（英語フル）
- m - 月（2桁の場合0あり）
- M - 月（英語3文字）
- F - 月（英語フル）
- n - 月（2桁の場合に0なし）
- Y - 年（4桁）
- y - 年（2桁）
selectMinDate - 選択できる最小の日付
selectMaxDate - 選択できる最大の日付
rangeYear - 表示する年月
monthNames - 月の名前（日本語はソース参照）
dayNames - 日付の名前（日本語はソース参照）
todayName - todayの表示（日本語はソース参照）