日時フィールドのタイムピッカーをカスタマイズする方法

はじめに

WPFormsのタイムピッカーで日付/時刻フィールドをカスタマイズしますか？ タイムピッカーは、ユーザーが選択できる時間のリストを提供します。これらの時間は、特定の時間範囲のみが利用可能になるように変更できます。フォームビルダーに組み込みオプションを提供して、特定の時間を制限することもできます。

タイムピッカーに単一の制限を設定する方法については、こちらのドキュメントをご覧ください。

このチュートリアルでは、PHPスニペットを使用して、時刻フィールドのタイムピッカーをカスタマイズして複数の時刻を無効にする方法を説明します。

フォームの作成

まず、新しいフォームを作成し、フィールドを追加し、時刻フォームフィールドを追加します。

フォームの作成にヘルプが必要な場合は、このドキュメントを確認してください。

このフォームでは、詳細設定タブのオプションを使用して、オフィスの営業時間と終了時間を午前8時から午後5時までに時間を制限します。

スニペットの追加

次に、毎日の全社ミーティングのために午前9時から午前10時までの時間を無効にしたいのですが、昼休み時間である午後12時から午後1時までの時間帯も無効にしたいです。これを実現するには、サイトにスニペットを追加する必要があります。

適用方法は3通りあります。

• サイト全体のすべてのタイムピッカー
• 特定のフォーム内のすべてのタイムピッカー
• 特定のフォーム内の特定のタイムピッカー。

ニーズに合ったコードスニペットを選択し、サイトにコピーしてください。

スニペットをサイトに追加する方法についてサポートが必要な場合は、こちらのチュートリアルをご覧ください。

サイト全体のすべてのタイムピッカー

以下は、サイト上のすべてのタイムピッカーに適用されます。

/**
 * Limit the times available in the Date Time field time picker.
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
 */

function wpf_dev_limit_time_picker() {
    ?>

    <script type="text/javascript">

        window.wpforms_timepicker = {

			// Disable lunch time and daily meeting time
			disableTimeRanges: [
				[ '9am', '10am' ],
				[ '12pm', '1pm' ]
			]

        };

    </script>

    <?php
}

add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );

特定のフォーム内のすべてのタイムピッカー

以下は、フォームID 879内のすべてのタイムピッカーに適用されます。

/**
 * Limit the times available in the Date Time field time picker.
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
 */

function wpf_dev_limit_time_picker() {
    ?>

    <script type="text/javascript">

        // Change this _879 to match the form ID you have on your own form
        window.wpforms_879 = window.wpforms_879 || {};
        window.wpforms_879.timepicker = {

			// Disable lunch time and daily meeting time
			disableTimeRanges: [
				[ '9am', '10am' ],
				[ '12pm', '1pm' ]
			]

        };

    </script>

    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );

特定のフォーム内の特定のタイムピッカー

以下は、フォームID 879内のフィールドID 8のタイムピッカーに適用されます。

/**
 * Limit the times available in the Date Time field time picker.
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
 */

function wpf_dev_limit_time_picker() {
    ?>

    <script type="text/javascript">

        // Change this _879_8 to match the form ID and the field ID you have on your own form
        window.wpforms_879_8 = window.wpforms_879_8 || {};
        window.wpforms_879_8.timepicker = {

            forceRoundTime: true,
			// Disable lunch time and daily meeting time
			disableTimeRanges: [
				[ '9am', '10am' ],
				[ '12pm', '1pm' ]
			]

        };

    </script>

    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );

フォームまたはフィールドIDの特定にサポートが必要な場合は、こちらの記事をご覧ください。

訪問者はスニペットで無効にした時刻を確認できますが、選択することはできません。

これで、WPFormsの日付/時刻フィールドのタイムピッカーをカスタマイズするために必要なすべてが揃いました。日付ピッカーの追加フォーマットを作成しますか？チュートリアル「日付フィールドの追加フォーマットを作成する方法」では、PHPを使用してこれを実現する方法を説明します。

関連

アクションリファレンス: wpforms_wp_footer

よくある質問

Q: このフィルターを使用して時間間隔を変更することもできますか？

A: もちろんです！デフォルトでは、WPFormsフォームビルダーは、時間間隔を15分、30分、1時間に設定するオプションを提供します。時間間隔を5分に変更するには、次のコードを使用します。

/**
 * Change the time intervals on the time picker
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
 */

function wpf_dev_limit_time_picker() {
    ?>
    <script type="text/javascript">

        // Change this _797 to match your own form ID number
        window.wpforms_797 = window.wpforms_797 || {};
        window.wpforms_797.timepicker = {
            
            // Limit times to every 5 minutes
            step: '5'
        };

    </script>
    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );

window.wpforms_797とstep: '5'を、フォームIDと使用したい時間間隔に合わせて変更するだけです。