Cómo personalizar el selector de hora del campo Fecha y Hora

Introducción

¿Le gustaría personalizar el campo Fecha / Hora para el selector de hora en WPForms? El Selector de Hora proporciona al usuario una lista de horas para elegir. Estas horas se pueden cambiar para que solo esté disponible un rango de horas específico. También puede proporcionar una opción integrada en el constructor de formularios para limitar ciertas horas.

Para obtener más información sobre cómo configurar un límite único para el selector de hora, consulte esta documentación.

En este tutorial, le mostraremos cómo personalizar el selector de hora en el campo Hora para deshabilitar varias horas utilizando un pequeño fragmento de PHP.

Creación de su formulario

Primero, crearemos un nuevo formulario, agregaremos nuestros campos y agregaremos un campo de formulario Hora.

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

Para nuestro formulario, vamos a usar las opciones de la pestaña Avanzado para Limitar Horas de 8 a. m. a 5 p. m. para la hora de apertura y cierre de nuestra oficina.

Añadir el fragmento

A continuación, queremos deshabilitar la hora de 9 a. m. a 10 a. m. para una reunión diaria de toda la empresa, pero también queremos deshabilitar la franja horaria de 12 p. m. a 1 p. m., que también son las horas del almuerzo. Para hacer esto, necesitamos agregar un fragmento a nuestro sitio.

Hay tres formas diferentes en que esto se puede aplicar:

• Todos los selectores de hora en todo el sitio
• Todos los selectores de hora dentro de un formulario específico
• Un selector de hora específico dentro de un formulario específico.

Elija el fragmento de código que mejor se adapte a sus necesidades y cópielo en su sitio.

Si necesita ayuda sobre cómo agregar fragmentos a su sitio, consulte este tutorial.

Todos los selectores de hora en todo el sitio

Lo siguiente se aplicará a todos los selectores de hora del sitio.

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

Todos los selectores de hora dentro de un formulario específico

Lo siguiente se aplicará a todos los selectores de hora dentro del formulario con ID 879.

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

Un selector de hora específico dentro de un formulario específico

Lo siguiente se aplicará al selector de hora dentro del campo con ID 8 dentro del formulario con ID 879.

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

Si necesita ayuda para identificar los ID de formulario o campo, revise este artículo.

Sus visitantes pueden ver las horas que ha deshabilitado con el fragmento, pero no podrán seleccionarlas.

Eso es todo lo que necesita para personalizar el selector de hora para el campo Fecha / Hora en WPForms. ¿Le gustaría crear formatos adicionales para su Selector de Fecha? Nuestro tutorial, Cómo crear formatos adicionales para el campo de fecha, le mostrará cómo puede usar PHP para lograr esto.

Relacionado

Referencia de acción: wpforms_wp_footer

Preguntas frecuentes

P: ¿También puedo usar este filtro para cambiar los intervalos de tiempo?

R: ¡Absolutamente! Por defecto, el constructor de formularios de WPForms le dará la opción de establecer sus intervalos de tiempo en 15 minutos, 30 minutos y 1 hora. Para cambiar los intervalos de tiempo a 5 minutos, usaría el siguiente código:

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

Solo recuerda cambiar window.wpforms_797 y step: '5' para que coincidan con el ID de tu formulario y el intervalo de tiempo que deseas usar.