JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】Datepickerで未来の日付を無効化する方法

JavaScriptのDatepicker（デートピッカー）で未来の日付を選択できないようにしたいケースはよくあります。予約システムや申込フォームなどでは、過去または当日以降しか選べないように制限したい場面が多いでしょう。

未来の日付を無効にするには、maxDateオプションに現在の日付を設定します。これにより、今日より後の日付はカレンダー上で選択できなくなります。以下に具体的な実装コードを示します。

実装コード

<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>選択された日付：<input type="text" class="disableFuturedate"></p>
<script>
    $(document).ready(function () {
      var currentDate = new Date();
      $('.disableFuturedate').datepicker({
        format: 'dd/mm/yyyy',
        autoclose:true,
        endDate: "currentDate",
        maxDate: currentDate
        }).on('changeDate', function (ev) {
            $(this).datepicker('hide');
        });
        $('.disableFuturedate').keyup(function () {
            if (this.value.match(/[^0-9]/g)) {
               this.value = this.value.replace(/[^0-9^-]/g, '');
            }
       });
   });
</script>
</body>
</html>

コードのポイント

  • var currentDate = new Date() で現在の日付を取得しています。
  • Datepickerの初期化時に maxDate: currentDate を指定することで、今日以降の日付が無効になります。
  • autoclose:true により、日付選択後にカレンダーが自動的に閉じます。
  • keyupイベントの処理では、手入力された値から数字以外の文字を除去し、不正な入力を防いでいます。

実行方法

上記のコードを「index.html」というファイル名で保存します。その後、ファイルを右クリックして「Open with Live Server」（Live Serverで開く）を選択すると、モダンなウェブブラウザ上で自動的にプログラムが実行されます。

実行結果

ブラウザでページを開くと、次のような画面が表示されます。

【JavaScript】Datepickerで未来の日付を無効化する方法

続いて、テキストボックスをクリックすると、下のスクリーンショットのようにカレンダー形式のデートピッカーが表示され、今日より先の日付がグレー表示になって選択できないことが確認できます。

【JavaScript】Datepickerで未来の日付を無効化する方法


  1. Google ChromeでJavaScriptを無効にする方法｜全体・特定サイト別・拡張機能の3つの手順

    現在、インターネット上のほぼすべてのウェブサイトがJavaScriptを使用しています。JavaScriptはウェブサイト、ひいてはインターネット全体にとって欠かせない存在となっており、それには理由があります。このプログラミング言語は、ウェブサイトで体験するあらゆるインタラクティブな動作、いわゆる「動くパーツ」を担っているからです。具体例としては、サイトに表示される広告や、コンテンツの自動更新機能などが挙げられます。本記事では、Google ChromeでJavaScriptを無効にする方法を詳しくご紹介します。ぜひ最後までご覧ください。実は、近年の多くのウェブサイトは、正常に表示・動作するた

  2. ブラウザでJavaScriptを有効・無効にする方法|Chrome・Edge・Firefox・Opera対応

    多くのインターネットブラウザは、音声コンテンツや広告、アニメーションなど、ユーザー体験を向上させるインタラクティブな機能を動作させるためにJavaScriptを使用しています。AndroidやiOSデバイスのブラウザもJavaScriptベースで動作しており、その理由は互換性の高さと扱いやすさにあります。一方で、パフォーマンスの低下やセキュリティ上の懸念から、ブラウザのJavaScriptを無効にしたい場面もあります。また、無効にした後に再度有効化したいケースもあるでしょう。そこで本記事では、主要ブラウザごとにJavaScriptを有効・無効にする手順を、初心者にもわかりやすく解説します。ブラ