日付ピッカーポップアップの位置を変更する方法

はじめに

簡単なスニペットを使用して、日付ピッカーフィールドのポップアップの位置をカスタマイズしますか？デフォルトでは、ポップアップはフィールドの配置とページのスクロールバーに基づいて動的に調整されます。このチュートリアルでは、スニペットを使用してポップアップの位置を永続的に設定する方法をステップバイステップで説明します。

フォームの作成

まず、フォームを作成し、2つの日付ピッカーフォームフィールドを組み込みましょう。

日付フォームフィールドを追加した後、高度な設定タブに移動し、日付ドロップダウンから日付ピッカーを選択します。

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

スニペットの追加

次に、ポップアップの位置を変更するために、サイトに小さなコードスニペットを追加する必要があります。サイトにスニペットを追加する方法がわからない場合は、このチュートリアルを確認してください。

すべてのフォームの場合

このスニペットは、サイト上のすべてのWPForms日付ピッカーに使用してください。

/**
 * Change the position of the date picker popup
 *
 * @link https://wpforms.com/developers/how-to-change-the-position-of-the-date-picker-popup/
 */
  
function wpf_move_datepicker_placement() {
    ?>

    <script type="text/javascript">

        var d = new Date();
        window.wpforms_datepicker = {
			
			// Set the date picker popup to "above" or "below"
			position: "above"
        
		}

    </script>

    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_move_datepicker_placement', 10 );

特定のフォームの場合

特定のフォームとフィールドIDを対象にするには、このスニペットを使用してください。

/**
 * Change the position of the date picker popup for a specific form and field ID
 *
 * @link https://wpforms.com/developers/how-to-change-the-position-of-the-date-picker-popup/
 */
  
function wpf_move_datepicker_placement() {
    ?>

    <script type="text/javascript">

        var d = new Date();
        window.wpforms_21_1 = window.wpforms_21_1 || {};
        window.wpforms_21_1.datepicker = {

            // Set the date picker popup to "above" or "below"
            position: "above"
        }

    </script>

    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_move_datepicker_placement', 10 );

上記のスニペットでは、フォームID 21を対象とし、そのフォーム内でフィールドID 1のみを対象としています。

フォームとフィールドIDの見つけ方がわからない場合は、このチュートリアルを参照してください。

これで、日付ピッカーポップアップの配置を変更するために必要なすべてが揃いました。日付ピッカーフィールドをさらにカスタマイズしますか？日付範囲または複数日付を日付ピッカーで許可する方法に関するチュートリアルをご覧ください。

関連

アクション参照: wpforms_wp_footer_end