カレンダー表示＆日付選択させる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日 00:00
