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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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