### [Como Usar Lógica Condicional Com um Seletor de Data](https://wpforms.com/developers/how-to-use-conditional-logic-with-a-date-picker/) **Publicado:** 21 de março de 2023 **Autor:** Umair Majeed **Resumo:** Este tutorial mostrar-lhe-á como usar Lógica Condicional com o seu campo Seletor de Data usando JavaScript para mostrar e ocultar campos do formulário com base na data no campo Seletor de Data. **Conteúdo:** Quer mostrar ou ocultar campos do formulário com base na idade de um utilizador? Ao combinar o campo Seletor de Data do WPForms com lógica condicional personalizada, pode criar formulários dinâmicos que se adaptam à entrada do utilizador. Este guia mostrar-lhe-á como exibir um campo de lista suspensa apenas quando o utilizador indicar que tem 21 anos ou mais – perfeito para conteúdo restrito à idade, registos de eventos ou cenários semelhantes. ## Configurar o Seu Formulário Primeiro, crie um formulário com estes campos: - Campo de Nome - Campo de Email - Campo de Data (para Data de Nascimento) - Campo de Lista Suspensa (este ficará oculto inicialmente) Se precisar de ajuda para criar o seu formulário, consulte o nosso guia sobre [como criar o seu primeiro formulário](https://wpforms.com/docs/creating-first-form/). ## Adicionar a Classe CSS Como queremos que o campo **Lista Suspensa** fique oculto quando o formulário é carregado pela primeira vez, precisamos de lhe adicionar um nome de classe CSS. Para o fazer, selecione o campo **Lista Suspensa** no seu editor de formulário e clique em **Avançado**. Em seguida, navegue até **Classes CSS** e introduza `age-restriction`. Certifique-se de que clica em **Guardar** no formulário para preservar as suas alterações. ## Usar Lógica Condicional para um campo de Data Agora é hora de adicionar o trecho de código ao seu site. Este código ocultará primeiro o campo **Lista Suspensa** quando o formulário for carregado. Em seguida, sempre que o campo **Data de Nascimento** for alterado, calculará se o utilizador tem 21 anos ou mais e mostrará ou ocultará o campo Lista Suspensa em conformidade. Lembre-se de atualizar estes valores no código: - O ID do formulário (2575 no exemplo) deve ser substituído pelo seu próprio ID de formulário - O ID do campo Seletor de Data (22 no exemplo) deve ser substituído pelo seu ID de campo E é tudo o que precisa para usar Lógica Condicional com um campo seletor de data. Em seguida, gostaria de alterar a posição do popup do seletor de data? Consulte o nosso tutorial sobre [Como Alterar a Posição do Popup do Seletor de Data](https://wpforms.com/developers/how-to-change-the-position-of-the-date-picker-popup/ "Como Alterar a Posição do Popup do Seletor de Data"). ## Ação de Referência [wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "Usando a ação wpforms_wp_footer_end") **Categorias:** Extensão **Etiquetas:** Campo Data e Hora, Javascript, JS ---