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

日付/時刻フィールドの時刻ピッカーで利用可能な時間間隔をカスタマイズしますか？デフォルトでは、時刻ピッカーは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つのフィールド、時刻を別のフィールドとして分離します。

フォームの作成方法については、こちらのドキュメントをご覧ください。

スニペットを先に（コードを）追加したため、フォームに時刻フィールドを追加して詳細設定を開くと、間隔のドロップダウン内に、追加した新しい間隔が表示されます。

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

これで、訪問者がフォームに入力する際に、時刻ピッカーに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 );