ユーザー入力を制限！jQuery Datepickerでテキストボックスを無効化する3つの方法

2024-04-06

jQuery Datepickerでテキスト入力を受け付けないカレンダーを表示する方法

jQuery Datepickerは、フォームにカレンダーを表示して日付を選択できるプラグインです。デフォルトでは、テキスト入力も可能ですが、ユーザーの入力を制限したい場合もあります。

この解説では、jQuery Datepickerでテキスト入力を受け付けないカレンダーを表示する方法について、以下の3つの方法を紹介します。

beforeShowイベントを使う
onCloseイベントを使う
readonly属性を使う

以下のコードは、3つの方法をすべて含んでいます。

<input type="text" id="datepicker">

<script>
$(function() {
  $("#datepicker").datepicker({
    // beforeShowイベント：カレンダー表示前にテキストボックスをクリア
    beforeShow: function() {
      $("#datepicker").val("");
    },
    // onCloseイベント：カレンダー非表示時にテキストボックスを無効化
    onClose: function() {
      $("#datepicker").attr("disabled", true);
    },
    // readonly属性：テキストボックスを最初から無効化
  }).attr("readonly", true);
});
</script>

beforeShowイベントは、カレンダー表示前に発生します。このイベントでテキストボックスの値をクリアすることで、ユーザーが入力した値を消去することができます。

readonly属性は、テキストボックスを編集不可にする属性です。この属性を設定することで、ユーザーがテキストボックスに値を入力することができなくなります。

補足

上記の方法以外にも、disableメソッドを使う方法もあります。

$("#datepicker").datepicker("disable");

このメソッドは、カレンダー全体を無効化します。日付の選択もできないので、注意が必要です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery Datepickerサンプル</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
  <input type="text" id="datepicker">

  <script>
  $(function() {
    $("#datepicker").datepicker({
      // beforeShowイベント：カレンダー表示前にテキストボックスをクリア
      beforeShow: function() {
        $("#datepicker").val("");
      },
      // onCloseイベント：カレンダー非表示時にテキストボックスを無効化
      onClose: function() {
        $("#datepicker").attr("disabled", true);
      },
      // readonly属性：テキストボックスを最初から無効化
    }).attr("readonly", true);
  });
  </script>
</body>
</html>

実行方法

上記のコードをHTMLファイルに保存します。
ブラウザでファイルを開きます。
テキストボックスをクリックすると、カレンダーが表示されます。
カレンダーで日付を選択すると、テキストボックスに選択した日付が表示されます。
テキストボックスに直接日付を入力することはできません。

動作確認

以下の点を動作確認してください。

カレンダーが表示されるか
テキストボックスに日付が選択されるか

jQuery Datepickerでテキスト入力を受け付けないカレンダーを表示する方法

$("#datepicker").datepicker({
  // changeYearイベント：年が変更されたときにテキストボックスをクリア
  changeYear: function() {
    $("#datepicker").val("");
  },
  // changeMonthイベント：月が変更されたときにテキストボックスをクリア
  changeMonth: function() {
    $("#datepicker").val("");
  }
});

beforeShowDayイベントは、カレンダーの日付が描画される前に発生します。このイベントで日付を選択不可にすることで、ユーザーがその日付を選択することを防ぐことができます。

$("#datepicker").datepicker({
  // beforeShowDayイベント：すべてのの日付を選択不可にする
  beforeShowDay: function() {
    return [false];
  }
});

minDateとmaxDateオプションを使う

minDateオプションとmaxDateオプションは、選択可能な最小値と最大値を設定することができます。これらのオプションを設定することで、ユーザーが選択できる日付の範囲を制限することができます。

$("#datepicker").datepicker({
  // minDateオプション：選択可能な最小値を今日に設定
  minDate: new Date(),
  // maxDateオプション：選択可能な最大値を1年後に設定
  maxDate: new Date().getFullYear() + 1, 11, 31
});