Gostaria de personalizar o campo Date Picker para permitir a seleção de um intervalo de datas ou de várias datas no seu formulário? Quando permite várias reservas num formulário, poderá ter de dar aos visitantes a possibilidade de selecionar um intervalo de datas ou várias datas. Por predefinição, só pode ser selecionada uma única data neste calendário.
Neste tutorial, mostraremos como usar o PHP para fornecer um intervalo de datas ou seleções de datas múltiplas para seus WPForms.
Nota: Ao usar snippets para o Date Picker, é melhor desativar qualquer um dos recursos internos que o WPForms fornece no construtor de formulários para restringir ainda mais as datas. Para mais informações, consulte esta documentação.
Criar o formulário
Primeiro, tem de criar o seu formulário e adicionar pelo menos um campo de formulário Data/Hora e definir o campo como Selecionador de data.
Se precisar de ajuda para criar um formulário, consulte esta documentação.
Permitir um intervalo de datas ou várias datas
Uma vez criado o formulário, escolha se pretende permitir um intervalo de datas ou permitir a seleção de várias datas no formulário e adicione esse snippet ao seu site.
Se precisar de ajuda sobre como adicionar snippets ao seu site, consulte este tutorial.
Nota: Tenha em atenção que, se editar estas entradas, o ecrã de entrada não suporta o intervalo de datas ou datas múltiplas. Este snippet é apenas para os utilizadores de frontend dos seus formulários.
Intervalo de datas
Este snippet específico permitirá que todos os selectores de datas seleccionem um intervalo de datas para todos os formulários.
/**
* Modify WPForms Date/Time field date picker to accept a range of dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_date_picker_range() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
mode: "range"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );
No registo da apresentação, serão indicadas as datas de início e de fim.
Várias datas
Em alternativa, pode utilizar este snippet que permite selecionar várias datas para cada seletor de datas nos seus formulários criados com o WPForms.
/**
* Modify WPForms Date/Time field date picker to accept multiple dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_date_picker_multiple() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
mode: "multiple"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_multiple', 10 );
Na entrada, todas as datas selecionadas serão separadas por uma vírgula.
Nota: Se utilizar integrações de terceiros, estes formatos de data podem não ser aceites por esses serviços. Certifique-se de que testa todas as personalizações antes de as utilizar num formulário ativo.
E é isso! Agora você pode selecionar um intervalo de datas ou várias datas nos seus WPForms. Gostaria de criar mais opções para o seu campo Data? Experimente o artigo sobre Como criar formatos adicionais para o campo de data.
Ação de referência
FAQ
P: Como posso direcionar um único formulário ou um único seletor de datas dentro de um formulário específico?
R: Para direcionar um formulário específico para o intervalo de datas, por exemplo, utilizaria este snippet.
/**
* Modify WPForms Date/Time field date picker to accept a range of dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_1049 = window.wpforms_1049 || {};
window.wpforms_1049.datepicker = {
mode: "range",
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Enquanto o 1049 dentro do window.wpforms_1049 é o ID do formulário.
Se tiver vários selectores de data num formulário específico, pode direcionar um ID de campo específico com este exemplo.
/**
* Modify WPForms Date/Time field date picker to accept a range of dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_1049_11 = window.wpforms_1049_11 || {};
window.wpforms_1049_11.datepicker = {
mode: "range",
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Tal como no primeiro exemplo, estamos a visar o ID de formulário 1049, mas neste exemplo também estamos a visar apenas o seletor de datas com o ID de campo 11.
Se precisar de ajuda para encontrar o ID do formulário e do campo, consulte este tutorial.
P: O formulário pode utilizar o intervalo de datas e continuar a limitar as datas?
R: Sem dúvida! Pode utilizar o intervalo de datas, não permitir datas passadas e permitir apenas a seleção antecipada de um número de dias. No snippet de código abaixo, estamos a visar o formulário ID 1049 e o seletor de datas do formulário irá:
- Não permitir a seleção de datas passadas
- Utilizar a funcionalidade de intervalo de datas
- Permitir apenas a seleção de um máximo de 14 dias
/**
* Modify WPForms Date/Time field date picker to accept a range of dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_1049 = window.wpforms_1049 || {};
window.wpforms_1049.datepicker = {
minDate: new Date(),
mode: "range",
maxDate: new Date().fp_incr(14)
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Se precisar de ajuda para encontrar o ID do formulário e do campo, consulte este tutorial.
P: Posso alterar o separador do intervalo de datas?
R: Sem dúvida! Para utilizar um separador de datas diferente no intervalo de datas, utilize este fragmento de código em vez do anterior.
/**
* Modify WPForms Date/Time field date picker to accept a range of dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_date_picker_range() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
mode: "range",
locale: {
rangeSeparator: 'sep-text-goes-here'
}
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );
Lembre-se apenas de alterar rangeSeparator: 'sep-text-goes-here' para corresponder ao que pretende que seja o separador. Por defeito, verá um traço (-) como separador.
P: Posso exigir um intervalo mínimo de dias a selecionar?
R: Sem dúvida, para utilizar o intervalo e exigir um número mínimo de dias, basta utilizar este fragmento de código.
/**
* Modify WPForms Date/Time field date picker to accept a range of dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_date_picker_range() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
mode: "range",
onClose: function(selectedDates, dateStr, instance) {
var daysInRange = document.getElementsByClassName('inRange');
var totalDays = daysInRange.length+2;
if(totalDays<=7) {
alert("Min 7 Days Required");
this.clear();
}
}
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );
P: Posso direcionar os selectores de data utilizando classes CSS em vez de objectos de janela?
R: Sim, pode direcionar os selectores de data utilizando classes CSS em vez de objectos de janela. Esta abordagem permite uma maior flexibilidade na seleção de elementos específicos sem uma personalização extensiva.
Eis um exemplo que utiliza selectores de classe jQuery:
/**
* Modify WPForms Date/Time field date picker to accept a range of dates using jQuery.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
if (typeof flatpickr !== 'undefined') {
$('.travel-form-date-range').each(function() {
var inputField = $(this).find('input.flatpickr-input');
if (inputField.length) {
flatpickr(inputField[0], {
mode: "range",
disableMobile: true
});
}
});
}
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10);
Neste exemplo, estamos a direcionar os selectores de datas com a classe CSS travel-form-date-range. Este método permite-lhe aplicar a funcionalidade de intervalo de datas a selectores de datas específicos com base na sua classe, em vez de utilizar IDs de formulários ou campos.
Não se esqueça de substituir travel-form-date-range com a classe CSS real que está a utilizar para os seus campos de seleção de datas.