### [Cómo utilizar la lógica condicional con un selector de fecha](https://wpforms.com/developers/how-to-use-conditional-logic-with-a-date-picker/)

**Publicado:** 21 de marzo de 2023
**Autor:** Umair Majeed

**Extracto:** Este tutorial te mostrará cómo utilizar la lógica condicional con el campo Selector de fecha mediante JavaScript para mostrar y ocultar campos del formulario en función de la fecha seleccionada en dicho campo. 

**Contenido:**

¿Quieres mostrar u ocultar campos del formulario en función de la edad del usuario? Al combinar el campo Selector de fecha de WPForms con lógica condicional personalizada, puedes crear formularios dinámicos que se adapten a la información introducida por el usuario.

Esta guía te mostrará cómo mostrar un campo desplegable solo cuando el usuario indique que tiene 21 años o más, lo cual es perfecto para contenido con restricción de edad, inscripciones a eventos o situaciones similares.

## Configuración de tu formulario

En primer lugar, crea un formulario con estos campos:

- Campo de nombre
- Campo de correo electrónico
- Campo de fecha (para la fecha de nacimiento)
- Campo desplegable (este estará oculto inicialmente)

Si necesitas ayuda para crear tu formulario, consulta nuestra guía sobre [cómo crear tu primer formulario](https://wpforms.com/docs/creating-first-form/).

## Añadir la clase CSS

Como queremos que el campo **desplegable** esté oculto cuando se carga el formulario por primera vez, tenemos que añadirle un nombre de clase CSS.

Para ello, selecciona el campo **Despliegable** en el editor de formularios y haz clic en **Avanzado**. A continuación, desplázate hacia abajo hasta **Clases CSS** e introduce `age-restriction`. Asegúrate de hacer clic en **Guardar** en el formulario para conservar los cambios.

![añade el nombre age-restriction a las clases CSS del campo desplegable](https://wpforms.com/wp-content/uploads/2023/03/wpforms-add-css-class-cond_date.jpg)## Uso de la lógica condicional para un campo de fecha

Ahora es el momento de añadir el fragmento de código a tu sitio web. Este código ocultará primero el campo **Despliegable** cuando se cargue el formulario. A continuación, cada vez que cambie el campo **Fecha de nacimiento**, calculará si el usuario tiene 21 años o más y mostrará u ocultará el campo Despliegable en consecuencia.

Recuerda actualizar estos valores en el código:

- El ID del formulario (2575 en el ejemplo) debe sustituirse por tu propio ID de formulario
- El ID del campo Selector de fecha (22 en el ejemplo) debe sustituirse por tu ID de campo

Y eso es todo lo que necesitas para utilizar la lógica condicional con un campo de selector de fecha. A continuación, ¿te gustaría cambiar la posición de la ventana emergente del selector de fecha? Echa un vistazo a nuestro tutorial sobre [Cómo cambiar la posición de la ventana emergente del selector de fecha](https://wpforms.com/developers/how-to-change-the-position-of-the-date-picker-popup/ "Cómo cambiar la posición de la ventana emergente del selector de fecha").

## Acción de referencia

[wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "Uso de la acción wpforms_wp_footer_end")

**Categorías:** Ampliación

**Etiquetas:** Campo de fecha y hora, JavaScript, JS

---