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

カレンダー表示＆日付選択させるjavascript「Fancy MooTools Date Picker」

｜ ｜ ｜ ｜ ｜ ｜ ｜

申込フォームなどでは、よく日付を入力してもらうことがあります。
これを簡単にかつ奇麗なデザインで実現したFancy MooTools Date Pickerを紹介します。

使用方法
Fancy MooTools Date Pickerから、DatePicker.js、DatePicker.css、date.gif、datefocus.gifをダウンロードします。
また、mootoolsからmootools.jsもダウンロードします。
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/DatePicker.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://yourdomain/DatePicker.css"style type="text/css">
<script type="text/javascript">
window.addEvent('domready', function(){
$$('input.DatePicker').each( function(el){
new DatePicker(el);
});
});
</script>
上記のように記述し、あとはフォームのinputにclass属性でDatePickerを付与すれば完成です。オプション
　・dayChars：曜日の名前省略
　・dayNames：曜日の名前
　・daysInMonth：月の日数
　・format：日付の形式
　・monthNames：月の名前
　・startDay：週の初めの曜日
　・yearOrder：年の順番
　・yearRange：ドロップダウンで表示する年度
　・yearStart：開始年度
<input type="text" class="DatePicker" alt="{
dayChars:3, //曜日を3文字表示
dayNames:['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'], //曜日の名前
daysInMonth:[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], //月ごとの日数
format:'yyyy-mm-dd',　 //日付形式
monthNames:['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'], //月の名前
startDay:1, //週の初めの曜日（1は月曜）
yearOrder:'desc', //年の順番（asc）
yearRange:90, //ドロップダウンで表示する年度
yearStart:2007 //開始年度
}">
＊当方の環境では、"json is not defined"でエラーになってしまいまして。。。
カレンダー表示＆日付選択させるjavascript「Fancy MooTools Date Picker」サンプル

記事作成：2007年10月31日

前の記事：既存のテーブルを簡単にソートさせるjavascript「Table-Sort」
次の記事：jQueryベースのニュースティッカーjavascript「liScroll」