タイムピッカーに追加の時間間隔を作成する方法

日付/時刻フィールドのタイムピッカーで利用可能な時間間隔をカスタマイズしたいですか？デフォルトでは、タイムピッカーは15分、30分、1時間のインターバルを提供します。

しかし、より具体的な時間単位が必要な場合は、ニーズに合わせて簡単に追加インターバルを作成することができます。このチュートリアルでは、その方法を紹介します！

時間間隔の追加

まず、フォームビルダーに時間間隔を追加するコードスニペットを追加します。これを行うには、このコードスニペットをあなたのサイトにコピー＆ペーストする必要があります。

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

/**
 * Add additional time intervals for the Time field Interval dropdown
 *
 * @link   https://wpforms.com/developers/how-to-create-additional-intervals-for-the-date-time-field-time-picker/
 */

function wpf_dev_datetime_time_intervals( $intervals ) {
      
     // Add time interval of 5 minutes
     $intervals[ '5' ] = esc_html__( '5 minutes', 'wpforms' );
     ksort( $intervals );
  
     return $intervals;
}

add_filter( 'wpforms_datetime_time_intervals' , 'wpf_dev_datetime_time_intervals', 10, 1 );

フォームの作成

次に、新しいフォームを作成し、このフォームに日付／時刻フィールドを追加する必要があります。このチュートリアルでは、日付を1つのフィールドに、時刻を別のフィールドにすることにします。

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

最初にスニペットを追加したので、フォームにTimeフィールドを追加してAdvanced Optionsを開くと、Intervalsのドロップダウンに追加した新しいインターバルが表示されます。

新しいオプションを選択し、フォームを保存する。

これで訪問者がフォームに入力すると、タイムピッカーに5分ごとのブロックが表示されます。

時間フィールドの追加フォーマットも作成したいですか？ 日付時間フィールドのタイムピッカーに追加フォーマットを作成する方法をご覧ください。

リファレンス・フィルター

フィルタ参照:wpforms_datetime_time_intervals

よくあるご質問

Q: 一度に複数の時間間隔を追加できますか？

A:もちろんです！スニペットはこのフォーマットでいくつでも作成できます。

/**
 * Add additional time intervals for the Time field Interval dropdown
 *
 * @link   https://wpforms.com/developers/how-to-create-additional-intervals-for-the-date-time-field-time-picker/
 */
 
function wpf_dev_datetime_time_intervals( $intervals ) {
       
     // Add time interval of 5 minutes
     $intervals[ '5' ] = esc_html__( '5 minutes', 'wpforms' );
	
	 // Add time interval of 2 hours
	 $intervals[ '120' ] = esc_html__( '2 hours', 'wpforms' );
	
     ksort( $intervals );
   
     return $intervals;
}
 
add_filter( 'wpforms_datetime_time_intervals' , 'wpf_dev_datetime_time_intervals', 10, 1 );