Cómo crear intervalos de tiempo adicionales para el selector de tiempo

¿Le gustaría personalizar los intervalos de tiempo disponibles en el selector de Hora del campo Fecha/Hora? Por defecto, el selector de hora ofrece intervalos establecidos en 15 minutos, 30 minutos y 1 hora.

Sin embargo, si necesita incrementos de tiempo más específicos, puede crear fácilmente intervalos adicionales para adaptarlos mejor a sus necesidades. ¡En este tutorial, le mostraremos cómo!

Añadir intervalos de tiempo adicionales

Vamos a empezar añadiendo el fragmento de código que creará intervalos de tiempo adicionales en nuestro constructor de formularios. Para ello, deberá copiar y pegar este fragmento de código en su sitio.

Si necesita ayuda para añadir fragmentos de código a su sitio, consulte este tutorial.

/**
 * 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 );

Creación de su formulario

A continuación, deberá crear un nuevo formulario y añadir un campo de Fecha / Hora a este formulario. A efectos de este tutorial, vamos a separar la fecha en un campo y la hora en un campo aparte.

Si necesita ayuda para crear su formulario, consulte esta documentación.

Dado que añadimos nuestro fragmento primero, una vez que hayamos añadido el campo de Hora a nuestro formulario y abramos las Opciones avanzadas, veremos dentro del desplegable de Intervalos el nuevo intervalo que acabamos de añadir.

Seleccione la nueva opción y guarde el formulario.

Ahora, cuando sus visitantes completen el formulario, verán que el selector de hora muestra bloques cada 5 minutos.

¿Le gustaría crear también formatos adicionales para el campo de Hora? Eche un vistazo a nuestro artículo sobre Cómo crear formatos adicionales para el selector de hora del campo de fecha y hora.

Filtro de Referencia

Referencia del filtro: wpforms_datetime_time_intervals

Preguntas frecuentes

P: ¿Puedo añadir más de un intervalo de tiempo a la vez?

R: ¡Absolutamente! Puede crear tantos como desee utilizando este formato para su fragmento.

/**
 * 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 );