Como Limitar os Anos Dentro do Seu Seletor de Data

Introdução

Gostaria de limitar os anos exibidos no seu campo de formulário Seletor de Data? Neste tutorial, faremos com que o Seletor de Data limite o ano para qualquer pessoa com 18 anos ou mais. Usando PHP, você pode conseguir isso facilmente e nós o guiaremos em cada etapa.

Criando o formulário

Para começar, criaremos um novo formulário e adicionaremos nossos campos, que incluirão um campo de Data.

Depois de adicionar o campo de formulário Data, clique na aba Avançado e, no menu suspenso, selecione Seletor de Data como o Tipo de Data.

Configuração

Em seguida, você precisará copiar este trecho para o seu site.

Se precisar de ajuda sobre como adicionar snippets ao seu site, consulte este tutorial.

/**
 * Limit years in date picker
 *
 * @link https://wpforms.com/developers/how-to-limit-the-years-inside-your-date-picker/
 */

function wpf_dev_limit_date_picker_years() {
?>

<script type="text/javascript">

	var d = new Date();
	window.wpforms_datepicker = {

		disableMobile: true,
		// Don't allow users to pick years less than 18 years
		maxDate: d.setDate( d.getDate() - 6574 ),

	}

</script>

<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker_years', 10 );

Com este trecho, estamos forçando o Seletor de Data a exibir apenas a data de nascimento de qualquer pessoa com 18 anos ou mais.

E é isso! Você agora limitou os anos disponíveis no seu seletor de data. Gostaria também de permitir um intervalo de datas no seu seletor de data? Confira nosso tutorial sobre Como Permitir Intervalo de Datas ou Datas Múltiplas no Seletor de Data.

Relacionado

Referência de Ação: wpforms_wp_footer_end

Perguntas Frequentes

P: Posso aplicar isso também ao Dropdown de Data?

R: Você pode facilmente usar um trecho diferente para conseguir isso. Simplesmente siga este tutorial e altere o intervalo de anos $args['years'] = range( 2019, 2020 ); para inserir o intervalo de anos que você gostaria.

P: Como posso direcionar um único formulário?

R: Com certeza, para direcionar um único formulário, use este trecho. Apenas lembre-se de alterar o ID do formulário e do campo. Este trecho usa window.wpforms_1279_1, que é o ID do formulário 1279 e o ID do campo 1. Você precisará atualizar esses IDs para corresponder aos seus próprios IDs.

Se precisar de ajuda para encontrar esses números de ID, consulte este tutorial.

/**
 * Limit years in date picker for a specific form
 *
 * @link https://wpforms.com/developers/how-to-limit-the-years-inside-your-date-picker/
 */

function wpf_dev_limit_date_picker_years() {
?>
 
<script type="text/javascript">

	var d = new Date();
	window.wpforms_1279_1 = window.wpforms_1279_1 || {};
	window.wpforms_1279_1.datepicker = {

		disableMobile: true,
		// Don't allow users to pick years less than 18 years
		maxDate: d.setDate( d.getDate() - 6574 ),

	}

</script>
 
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker_years', 10 );