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

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

sponsors

使用方法

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を付与すれば完成です。

sponsors

オプション
<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サンプルページ一覧
skuare.net