jQuery UI の Datepicker プラグインのカレンダーを使った、日付範囲指定フォーム。
実装例（サンプル）
日付範囲:
実装例（サンプル）の動作について
「から」の左側の、テキスト入力欄をクリックすると、前月・今月・次月の日本語のカレンダーが現れる。カレンダーの日付をクリックすると、その日付を、テキスト入力欄に入力する。
「まで」の左側の、テキスト入力欄をクリックすると、前月・今月・次月の日本語のカレンダーが現れる。「から」の左側の、テキスト入力欄に入力した日付より過去の日は、選択できない。カレンダーの日付をクリックすると、その日付を、テキスト入力欄に入力する。
「まで」の左側の、テキスト入力欄に日付を入力した状態で、「から」の左側の、テキスト入力欄をクリックし、カレンダーを開くと、「まで」の左側の、テキスト入力欄に入力した日付より未来の日は、選択できないようになっている。
をクリックすると、カレンダーが１カ月分進む。
をクリックすると、カレンダーが１カ月分戻る。
実装例（サンプル）のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
まとめて読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="ui/i18n/jquery.ui.datepicker-ja.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="ui/i18n/jquery.ui.datepicker-ja.js"></script>
個別に読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="ui/i18n/jquery.ui.datepicker-ja.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="ui/i18n/jquery.ui.datepicker-ja.js"></script>
JavaScript
<script>
<!--
jQuery( function() {
var dates = jQuery( '#jquery-ui-datepicker-from, #jquery-ui-datepicker-to' ) . datepicker( {
showAnim: 'clip',
changeMonth: true,
numberOfMonths: 3,
showCurrentAtPos: 1,
onSelect: function( selectedDate ) {
var option = this . id == 'jquery-ui-datepicker-from' ? 'minDate' : 'maxDate',
instance = jQuery( this ) . data( 'datepicker' ),
date = jQuery . datepicker . parseDate(
instance . settings . dateFormat ||
jQuery . datepicker . _defaults . dateFormat,
selectedDate, instance . settings );
dates . not( this ) . datepicker( 'option', option, date );
}
} );
} );
// -->
</script>
<!--
jQuery( function() {
var dates = jQuery( '#jquery-ui-datepicker-from, #jquery-ui-datepicker-to' ) . datepicker( {
showAnim: 'clip',
changeMonth: true,
numberOfMonths: 3,
showCurrentAtPos: 1,
onSelect: function( selectedDate ) {
var option = this . id == 'jquery-ui-datepicker-from' ? 'minDate' : 'maxDate',
instance = jQuery( this ) . data( 'datepicker' ),
date = jQuery . datepicker . parseDate(
instance . settings . dateFormat ||
jQuery . datepicker . _defaults . dateFormat,
selectedDate, instance . settings );
dates . not( this ) . datepicker( 'option', option, date );
}
} );
} );
// -->
</script>
HTML
<p id="jquery-ui-datepicker-wrap">
日付範囲:
<input type="text" id="jquery-ui-datepicker-from" name="jquery-ui-datepicker-from"/>
<label for="jquery-ui-datepicker-from">から</label>
<input type="text" id="jquery-ui-datepicker-to" name="jquery-ui-datepicker-to"/>
<label for="jquery-ui-datepicker-to">まで</label>
</p>
日付範囲:
<input type="text" id="jquery-ui-datepicker-from" name="jquery-ui-datepicker-from"/>
<label for="jquery-ui-datepicker-from">から</label>
<input type="text" id="jquery-ui-datepicker-to" name="jquery-ui-datepicker-to"/>
<label for="jquery-ui-datepicker-to">まで</label>
</p>