はじめに
WPFormsのタイムピッカーの日付/時間フィールドをカスタマイズしたいですか？ タイムピッカーはユーザーに選択可能な時間のリストを提供します。これらの時間は、特定の時間範囲のみが利用できるように変更することができます。また、特定の時間を制限するためにフォームビルダーの組み込みオプションを提供することもできます。
タイムピッカーのシングルリミットの設定については、 こちらのドキュメントをご覧ください。
このチュートリアルでは、小さなPHPスニペットを使って、Timeフィールドのタイムピッカーをカスタマイズし、複数回無効にする方法を紹介します。
フォームの作成
まず、新しいフォームを作成し、フィールドを追加し、Timeフォームフィールドを追加します。
フォームの作成にヘルプが必要な場合は、こちらのドキュメントをご覧ください。
このフォームでは、「詳細設定」タブのオプションを使用して、オフィスの開閉時間を午前8時から午後5 時までとします。
スニペットの追加
次に、毎日午前9時から午前10時までの全社会議の時間帯を無効にしたいが、午後12時から午後1時までのランチタイムの時間帯も無効にしたい。 そのためには、サイトにスニペットを追加する必要がある。
この適用には3つの異なる方法がある：
- 全タイムピッカー
- 特定のフォーム内のすべてのタイムピッカー
- 特定のフォーム内の特定のタイムピッカー。
あなたのニーズに合ったコード・スニペットを選び、あなたのサイトにコピーしてください。
あなたのサイトにスニペットを追加する方法についてヘルプが必要な場合は、こちらのチュートリアルをご覧ください 。
jQuery timepickerライブラリで利用可能なオプションを使用して、タイムピッカーをさらにカスタマイズできます。
全タイムピッカー
以下は、サイト上のすべてのタイムピッカーに適用されます。
/**
* 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 );
特定のフォーム内のすべてのタイムピッカー
以下は、フォームID879内のすべてのタイムピッカーに適用されます。
/**
* 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 );
特定のフォーム内の特定のタイムピッカー
以下は、フォームID879のフィールドID8内のタイムピッカーに適用されます。
/**
* 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の日付/時刻フィールドのタイムピッカーをカスタマイズするために必要なことは以上です。 日付ピッカーに追加フォーマットを作成したいですか？ チュートリアル「How to Create Additional Formats for the Date Field」では、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と使用したい時間間隔を一致させます。