Como Limitar os Anos Dentro do seu Seletor de Data

Introdução

Gostaria de limitar os anos que aparecem no seu campo de formulário Seletor de Data? Neste tutorial, vamos fazer com que o Seletor de Data limite o ano a qualquer pessoa com 18 anos ou mais. Usando PHP, pode conseguir isto facilmente e vamos guiá-lo em cada passo.

Criação do formulário

Para começar, vamos criar um novo formulário e adicionar os nossos campos, que incluirão um campo Data.

Depois de adicionar o campo de formulário Data, clique no separador Avançado e, a partir da lista pendente, selecione Seletor de Data como o Tipo de Data.

Configuração

Em seguida, terá de copiar este trecho para o seu site.

Se precisar de ajuda sobre como adicionar fragmentos de código 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 a forçar o Seletor de Data a exibir apenas a data de nascimento de qualquer pessoa com 18 anos ou mais.

E é tudo! Agora limitou os anos disponíveis no seu seletor de datas. Gostaria também de permitir um intervalo de datas no seu seletor de datas? Veja o nosso tutorial sobre Como Permitir Intervalo de Datas ou Datas Múltiplas no Seletor de Datas.

Relacionado

Referência de Ação: wpforms_wp_footer_end

FAQ

P: Posso também aplicar isto ao Menu Suspenso de Datas?

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

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

R: Absolutamente, para direcionar um único formulário, use este trecho. Apenas se lembre 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. Terá de atualizar estes IDs para corresponder aos seus próprios IDs.

Se precisar de ajuda para encontrar estes números de ID, por favor veja 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 );