Introdução
Gostaria de limitar os anos que aparecem no campo de formulário do Date Picker? Neste tutorial, vamos fazer com que o Date Picker limite o ano a qualquer coisa que tenha 18 anos ou mais. Usando PHP, você pode facilmente conseguir isso e nós o acompanharemos em cada passo.
Criar o 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çadas e, no menu pendente, selecione Selecionador de data como o Tipo de data.
Se precisar de ajuda para criar o seu formulário, pode consultar esta documentação.
Configuração
De seguida, terá de copiar este snippet 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 snippet, estamos a forçar o Date Picker a apresentar apenas a data de nascimento de qualquer pessoa com 18 anos ou mais.
E já está! Já limitou os anos disponíveis no seu seletor de datas. Gostaria de permitir também um intervalo de datas no seu seletor de datas? Confira nosso tutorial sobre Como permitir um intervalo de datas ou várias datas no selecionador de datas.
Relacionadas
Referência da ação: wpforms_wp_footer_end
FAQ
P: Também posso aplicar isto ao menu pendente de data?
A: Pode facilmente utilizar um snippet diferente para o conseguir. Basta seguir este tutorial e alterar o intervalo de anos $args['years'] = range( 2019, 2020 ); para introduzir o intervalo de anos pretendido.
P: Como posso direcionar um único formulário?
R: Sem dúvida, para direcionar um único formulário, utilize este snippet. Lembre-se apenas de alterar o ID do formulário e do campo. Esse snippet usa window.wpforms_1279_1, que é o ID do formulário 1279 e o ID do campo 1. Terá de atualizar estes IDs para corresponderem aos seus próprios IDs.
Se precisar de ajuda para encontrar estes números de identificação, 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 );