日付ピッカーで日付範囲または複数日付を許可する方法

Markdownを表示

フォームで日付範囲または複数日付の選択を許可するように日付ピッカーフィールドをカスタマイズしますか？ 1つのフォームで複数の予約を許可する場合、訪問者が日付の範囲または複数日付を選択できるようにする必要があるかもしれません。デフォルトでは、このカレンダーでは単一の日付のみを選択できます。

このチュートリアルでは、PHPを使用してWPFormsで日付範囲または複数日付の選択を提供する方法を説明します。

注意: 日付ピッカーにスニペットを使用する場合、日付をさらに制限するために、フォームビルダーでWPFormsが提供する組み込み機能はすべてオフにするのが最善です。詳細については、こちらのドキュメントをご覧ください。

フォームの作成

まず、フォームを作成し、少なくとも1つの日付/時刻フォームフィールドを追加して、フィールドを日付ピッカーに設定する必要があります。

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

日付範囲または複数日付の許可

フォームが作成されたら、日付範囲を許可するか、フォームで複数日付を選択できるようにするかを選択し、そのスニペットをサイトに追加してください。

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

注意: これらのエントリを編集する場合、エントリ画面は日付範囲または複数日付をサポートしないことに注意してください。このスニペットは、フォームのフロントエンドユーザー専用です。

日付範囲

この特定のスニペットにより、すべての日付ピッカーで、すべてのフォームの日付範囲を選択できるようになります。

/**
 * Modify WPForms Date/Time field date picker to accept a range of dates.
 *
 * @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
 */
 
function wpf_dev_date_picker_range() {
?>
    <script type="text/javascript">
 
        window.wpforms_datepicker = {
            mode: "range"
        }
 
    </script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );

送信エントリ内で、開始日と終了日が記録されます。

複数日付

または、WPFormsで作成されたフォームのすべての日付ピッカーで複数日付を選択できるようにするこのスニペットを使用することもできます。

/**
 * Modify WPForms Date/Time field date picker to accept multiple dates.
 *
 * @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
 */
 
function wpf_dev_date_picker_multiple() {
    ?>
    <script type="text/javascript">
 
    window.wpforms_datepicker = {
        mode: "multiple"
    }
 
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_multiple', 10 );

エントリ内で、選択された日付はコンマで区切られます。

注意: サードパーティの統合を使用している場合、これらの日付形式はそれらのサービスで受け入れられない場合があります。ライブフォームで使用する前に、必ずカスタマイズをテストしてください。

これで、WPFormsで日付範囲または複数日付を選択できるようになりました。日付フィールドのオプションをさらに作成しますか？日付フィールドの追加フォーマットを作成する方法の記事を試してみてください。

参照アクション

wpforms_wp_footer_end

よくある質問

Q: 特定のフォームまたは特定のフォーム内の単一の日付ピッカーをターゲットにするにはどうすればよいですか？

A: たとえば、日付範囲の特定のフォームをターゲットにするには、このスニペットを使用します。

/**
 * Modify WPForms Date/Time field date picker to accept a range of dates.
 *
 * @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
 */
 
function wpf_dev_limit_date_picker() {
?>
 
<script type="text/javascript">
 
    window.wpforms_1049 = window.wpforms_1049 || {};
 
    window.wpforms_1049.datepicker = {
        mode: "range",
    }
 
</script>
 
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );

window.wpforms_1049内の1049はフォームIDです。

特定のフォーム内に複数の日付ピッカーがある場合は、この例で特定のフィールドIDをターゲットにすることができます。

/**
 * Modify WPForms Date/Time field date picker to accept a range of dates.
 *
 * @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
 */
 
function wpf_dev_limit_date_picker() {
?>
 
<script type="text/javascript">
 
    window.wpforms_1049_11 = window.wpforms_1049_11 || {};
 
    window.wpforms_1049_11.datepicker = {
        mode: "range",
    }
 
</script>
 
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );

最初の例と同様に、フォームID1049をターゲットにしていますが、この例ではフィールドID11の日付ピッカーのみをターゲットにしています。

フォームとフィールドIDの検索でお困りの場合は、こちらのチュートリアルをご覧ください。

Q: フォームで日付範囲を使用しつつ、日付を制限することはできますか？

A: もちろんです！日付範囲を使用し、過去の日付を許可せず、事前に選択できる日数のみを制限することができます。以下のコードスニペットでは、フォームID 1049 を対象としており、フォームの日付ピッカーは次のようになります。

過去の日付を選択できないようにする
日付範囲機能を使用する
最大14日間のみ選択できるようにする

/**
 * Modify WPForms Date/Time field date picker to accept a range of dates.
 *
 * @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
 */
 
function wpf_dev_limit_date_picker() {
?>
    <script type="text/javascript">
 
    window.wpforms_1049 = window.wpforms_1049 || {};
     
    window.wpforms_1049.datepicker = {
        minDate: new Date(),
        mode: "range",
        maxDate: new Date().fp_incr(14)
    }
 
    </script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );

フォームとフィールドIDの検索でお困りの場合は、こちらのチュートリアルをご覧ください。

Q: 日付範囲の区切り文字を変更できますか？

A: もちろんです！日付範囲で異なる日付区切り文字を使用するには、上記のコードスニペットの代わりにこちらのコードスニペットを使用してください。

/**
 * Modify WPForms Date/Time field date picker to accept a range of dates.
 *
 * @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
 */
 
function wpf_dev_date_picker_range() {
?>
    <script type="text/javascript">
 
        window.wpforms_datepicker = {
            mode: "range",
        locale: {
            rangeSeparator: 'sep-text-goes-here'
        }
        }
 
    </script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );

rangeSeparator: ‘sep-text-goes-here’ を、区切り文字として使用したいものに合わせて変更することを忘れないでください。デフォルトでは、ダッシュ（-）が区切り文字として表示されます。

Q: 日付の最小範囲を指定することはできますか？

A: もちろんです。範囲を使用し、最小日数を指定するには、こちらのコードスニペットを使用してください。

/**
 * Modify WPForms Date/Time field date picker to accept a range of dates.
 *
 * @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
 */
 
function wpf_dev_date_picker_range() {
?>
    <script type="text/javascript">
 
        window.wpforms_datepicker = {
            mode: "range",
        onClose: function(selectedDates, dateStr, instance) {
                var daysInRange = document.getElementsByClassName('inRange');
        var totalDays = daysInRange.length+2;
        if(totalDays<=7) {
                    alert("Min 7 Days Required");
            this.clear();
        }
            }
        }
 
    </script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );

Q: ウィンドウオブジェクトの代わりにCSSクラスを使用して日付ピッカーを対象にすることはできますか？

A: はい、ウィンドウオブジェクトの代わりにCSSクラスを使用して日付ピッカーを対象にすることができます。このアプローチにより、広範なカスタマイズなしに特定の要素を対象とする柔軟性が高まります。

jQueryクラスセレクターを使用した例を次に示します。

/**
 * Modify WPForms Date/Time field date picker to accept a range of dates using jQuery.
 *
 * @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
 */
function wpf_dev_limit_date_picker() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        if (typeof flatpickr !== 'undefined') {
            $('.travel-form-date-range').each(function() {
                var inputField = $(this).find('input.flatpickr-input');
                if (inputField.length) {
                    flatpickr(inputField[0], {
                        mode: "range",
                        disableMobile: true
                    });
                }
            });
        }
    });
    </script>
    <?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10);

この例では、CSSクラス travel-form-date-range を持つ日付ピッカーを対象としています。この方法では、フォームまたはフィールドIDを使用するのではなく、クラスに基づいて特定の日付ピッカーに日付範囲機能を適用できます。

travel-form-date-range を、日付ピッカーフィールドに使用している実際のCSSクラスに置き換えることを忘れないでください。

日付ピッカーカレンダーで一度に複数の月を表示できますか？

はい！Flatpickrライブラリの showMonths オプションを使用して、一度に複数の月を表示できます。これは、範囲を選択する際にユーザーにより多くの日付を一目で確認してもらいたい場合に役立ちます。

function wpf_dev_date_picker_range() {
?>
    <script type="text/javascript">
        window.wpforms_datepicker = {
            mode: "range",
            showMonths: 2
        }
    </script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );

上記の例では、日付を選択するとカレンダーに2つの月が並べて表示されます。表示したい月の数に応じて、showMonths を任意の数値に変更できます。