ご注意!

この記事にはJavaScriptコードが含まれており、開発者を対象としています。このコードは便宜上提供していますが、コードのカスタマイズやサードパーティの開発についてはサポートを提供していません。

追加のガイダンスについては、WPBeginner の カスタムコードの追加方法に関するチュートリアル を参照してください。

閉じる

タイムピッカーでの過去の時間の無効化

WPFormsの「日付/時刻」フィールドを使用する際に、過去の時刻を無効にしますか?フォームで、デフォルトではWPFormsでサポートされていない、その日のうちに既に経過した時刻をすべて無効にしたい場合があります。

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


フォームの作成

まず、フォームを作成し、少なくとも1つの時刻フィールドを含むフィールドを追加することから始めます。

フォームの作成についてサポートが必要な場合は、こちらのドキュメントをご覧ください

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

フォームを作成し、時刻フィールドを追加します。間隔レベルも設定する必要があります。

スニペットの追加

過去の時刻を自動的に無効にするには、サイトにスニペットを追加する必要があります。開始する前に、WordPressでカスタムコードスニペットを追加する方法に問題がある場合は、こちらのチュートリアルをご覧ください

このスニペットは、フォームID999を探し、フィールドID8にのみ適用されます。過去の時刻を無効にするだけでなく、丸め処理も行われるため、9:37のような時刻選択肢が表示されることはありません。

window.wpforms_999_8の各インスタンスを、ご自身のフォームとフィールドIDに合わせて更新する必要があります。IDの見つけ方がわからない場合は、こちらのチュートリアルをご覧ください

これで完了です!「日付/時刻」フィールドで過去の時刻を無効にする方法がわかりました。

次に、時刻フィールドの独自の間隔を作成しますか?「日付/時刻」フィールドのタイムピッカーに追加の間隔を作成するチュートリアルをご覧ください。

アクション参照: wpforms_wp_footer_end