jquery UI datepicker の基本vol3 – 月の複数表示や選択日付の期間指定などの実装方法

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

こんにちはToshikuraです。今回のTipsは【jquery UI datepicker の基本vol3 – 月の複数表示や選択日付の期間指定などの実装方法】です。特定期間の選択方法や日付のフォーマット変更等、日付まわりのカスタマイズ方法をまとめました。

アーカイブ

  1. vol1.設置方法から日本語化対応など
  2. vol2.前後月の日付表示、今日より前の日を選択不可などの日付カスタマイズ編
  3. vol3.月の複数表示や選択日付の期間指定などの実装方法
  4. vol4.カレンダーのインライン表示とインライン状態での期間選択
  5. vol5.インライン状態での期間選択と選択期間のハイライトの実装

月の複数表示

例では3ヶ月に絞って複数表示をしています。

<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script><script>
$(function() {
$('#from').datepicker({
numberOfMonths: 3
});
});
</script>
<input id="from" type="text">

日付のフォーマットを変更

日付のフォーマットを変更します。例では「2014-11-11」という表示形式になっています。
 

<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script><script>
$(function() {
$('#from').datepicker({
dateFormat:'yy-mm-dd'
});
});
</script>
<input id="from" type="text">

日付の期間指定

特定開始日から特定終了日までの期間選択を可能にする方法です。onCloseで閉じるタイミングを取得し、inputのvalueに入力〜指定日以前以後の選択不可を指定しています。このonClose以外にもonChangeMonthYear等様々なタイミングが取得できますので詳しくは以下をご確認ください。
 

<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script><script>
$(function() {
$('#from').datepicker({
onClose: function(dateText, inst) {
$('#to').datepicker('option', 'minDate', dateText);
$('#from').val(dateText);
}
});
$('#to').datepicker({
onClose: function(dateText, inst) {
$('#from').datepicker('option', 'maxDate', dateText);
$('#to').val(dateText);
}
});
});
</script>
<input id="from" type="text">
<input id="to" type="text">

Options 概要 Type
onClose DatePickerが閉じた際に実行 :function( String dateText, Object inst )
onSelect DatePickerが選択された際に実行 :function( String dateText, Object inst )
onChangeMonthYear 月や年移動をした際に実行 :function( Integer year, Integer month, Object inst )
beforeShow DatePickerが表示される直前に実行 :function( Element input, Object inst )
beforeShowDay DatePickerに日付が表示される直前に実行 :function( Date date )

参照:Datepicker Widget | jQuery UI API Documentation

以上になります。