### [タイムピッカーで過去の日時を無効にする方法](https://wpforms.com/developers/how-to-disable-past-times-on-the-time-picker/)

**公開日:** 2022年1月21日
**著者:** David Ozokoye

**概要:** このチュートリアルでは、JavaScriptを使用してタイムピッカーフィールドから過去の日時を無効にする方法をご紹介します。

**内容:**

WPFormsで日付/時刻フィールドを使用する際、過去の日時を無効にしたいとお考えではありませんか？フォーム上で、その日にすでに過ぎた時刻を無効にしたい場合があるかもしれませんが、これは現在、WPFormsではデフォルトではサポートされていません。

 このチュートリアルでは、カスタムJavaScriptスニペットを使用して、過去の日時を無効にする方法をご紹介します。

---

## フォームの作成

まず、フォームを作成し、少なくとも1つの**日時**フィールドを含むフィールドを追加します。

フォームの作成についてサポートが必要な場合は、[こちらのドキュメント](https://wpforms.com/docs/creating-first-form/ "初めてのフォームの作成方法")をご参照ください。

**日時**フィールドを追加したら、**詳細**タブをクリックし、**間隔**を設定します。このデモでは、**15分**に設定しています。

![フォームを作成し、**Time**フィールドを追加してください。また、**間隔**も設定する必要があります](https://wpforms.com/wp-content/uploads/2022/01/add-time-field-wpforms.jpg)## スニペットの追加

過去の時間を自動的に無効にするには、サイトにスニペットを追加する必要があります。作業を始める前に、WordPressでのカスタムコードスニペットの追加についてサポートが必要な場合は、[こちらのチュートリアル](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "WPFormsにカスタムPHPまたはJavaScriptを追加する方法")をご確認ください。

このスニペットは、フォームIDが**999**のフォームを検索し、フィールドIDが**8**のフィールドにのみ適用されます。過去の日時を無効にするだけでなく、四捨五入も行われるため、**9:37**のような時刻が選択肢として表示されることはありません。

**window.wpforms\_999\_8** の各箇所を、ご自身のフォームIDおよびフィールドIDに合わせて更新する必要があります。これらのIDの確認方法については、[こちらのチュートリアル](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "フォームIDとフィールドIDの確認方法")をご参照ください。

以上です！これで、日付/時刻フィールドで過去の日時を無効にする方法がわかりました。

次に、**時刻**フィールド用に独自の**間隔**を作成してみませんか？ [日付/時刻フィールドのタイムピッカーに追加の間隔を作成する方法](https://wpforms.com/developers/how-to-create-additional-intervals-for-the-date-time-field-time-picker/ "日付/時刻フィールドのタイムピッカーに追加の間隔を作成する方法")に関するチュートリアルをご覧ください。

## 関連情報

アクションリファレンス：[wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "wpforms_wp_footer_end アクションの使用方法")

**カテゴリ：** チュートリアル

**タグ：** Javascript, JS

---