jquery UI datepicker の基本vol4 – カレンダーのインライン表示とインライン状態での期間選択

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

こんにちはToshikuraです。今回のTipsは【jquery UI datepicker の基本vol4 – カレンダーのインライン表示とインライン状態での期間選択】です。これまではフォームをクリック時にカレンダーが開きましたが、ここでは最初から開いておくインライン表示とインライン状態での期間選択をまとめておきます。

アーカイブ

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

インライン表示 DEMO

方法は至ってシンプルです。これまでは$('フォームID').datepicker();としてきた所を$('DIV等').datepicker();に変更するだけです。
 

&<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script><script>
$(function() {
$('#formBd').datepicker({
onSelect: function(dateText, inst) {
$('#from').val(dateText);
}
});
});
</script>
<div id="formBd"></div>
<input id="from" type="text" value="">

インライン状態での期間選択 DEMO

インライン状態での期間選択方法です。
 

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

以上になります。