skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

日本語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名">
日本語OKの日付選択javascript「PBBDatePicker」サンプル

記事作成：2007年09月30日

前の記事：要素にグラデーションをかけるjavascript「Gradient」
次の記事：自由自在にグラデーションを付けるjavascript「jQuery gradient」