カレンダー表示＆日付選択させる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」サンプル