jquery UI datepicker の基本vol2 – 前後月の日付表示、今日より前の日を選択不可などの日付カスタマイズ編

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

こんにちはToshikuraです。今回のTipsは【jquery UI datepicker の基本vol2 – 前後月の日付表示、今日より前の日を選択不可などの日付カスタマイズ編】です。すこし期間をあけてしまいましたが前回のjquery UI datepicker の基本vol1 – 設置方法から日本語化対応などからの続編です。ここでは何回かに分けて基本から少し発展したカスタマイズまでをメモしていこうかと思います。

アーカイブ

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

前後月の日付表示

前後月の日付表示はカレンダー上に表示される前と後の月からまたいできた日付の事です。一般的なカレンダーですと表示されている方が多い気がします。
 

<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(function() {
$(‘#from’).datepicker({
showOtherMonths: true
});
});
</script>
<input id="from" type="text">

今日より前の日を選択不可

上記で前後月の日付表示を表示しましたのでここでは「今日より前の日付」を選択不可にします。minDate部分の数値をカスタマイズする事で今日から一週間後から選択が可能というような指定の仕方もできますので色々お試しください。
 

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

曜日のテキストを変更

ここでは曜日のテキストを変更してみます。デモでは日曜日を”S”、月曜日を”M”というように変更しています。
 

<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(function() {
$('#from').datepicker({
dayNamesMin:['S','M','T','W','T','F','S']
});
});
</script>
<input id="from" type="text">

以上になります。