datepicker

日付入力欄なんかで最近よくみるカレンダーがにゅーっと出てくるやつです

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<script type="text/javascript">
$(function() {
    $("#calendar").datepicker();
});
</script>

最低限必要な記述は上記のみ
オプションもたくさんあります、以下割とよく使うもの。
dateFormat: ‘yy/mm/dd’ 表示形式(2011/7/7)。
showButtonPanel: true カレンダー左下に今日の日付を選べるボタンと右下に閉じるボタン追加。
numberOfMonths: [行,列] テーブルの概念と同じで、何行何列分のカレンダーを表示するか(3行3列であれば3×3の9個)。
maxDate: ‘+1m’ 未来の日付の選択可能範囲(年・月・週・日がそれぞれymwdに対応、+1wであれば1週間先まで)。
minDate: ‘-1m’ 過去の日付の選択可能範囲(年・月・週・日がそれぞれymwdに対応、+1wであれば1週間前まで)。
※複数個記述する際には最後の行以外の文末にカンマ(,)を忘れないように。
他にもアニメーションの仕方や表示のディレイなど面白いオプションが様々ですが、長くなるため割愛させていただきます。

コメント

タイトルとURLをコピーしました