Resumo de IA
Gostaria de personalizar o campo Seletor de Datas para permitir a seleção de um intervalo de datas ou de várias datas no seu formulário? Ao permitir várias reservas num só formulário, poderá ter de dar aos seus visitantes a capacidade de selecionar um intervalo de datas ou várias datas. Por defeito, apenas uma única data pode ser selecionada neste calendário.
Neste tutorial, vamos mostrar-lhe como usar PHP para fornecer um intervalo de datas ou seleções de várias datas para o seu WPForms.
Nota: Ao usar snippets para o Seletor de Datas, é melhor desativar todas as funcionalidades integradas que o WPForms fornece no construtor de formulários para restringir ainda mais as datas. Para mais informações, consulte esta documentação.
Criação do formulário
Primeiro, terá de criar o seu formulário e adicionar pelo menos um campo de formulário Data/Hora e definir o campo para Seletor de Datas.
Se precisar de alguma assistência na criação de um formulário, reveja esta documentação.
Permitir um intervalo de datas ou várias datas
Depois de o seu formulário ser criado, escolha se pretende permitir um intervalo de datas ou permitir a seleção de várias datas no seu 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 intervalos de datas ou várias datas. Este snippet é apenas para os utilizadores frontend dos seus formulários.
Intervalo de Datas
Este snippet específico permitirá que todos os seletores de datas selecionem 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 );
Dentro da entrada de submissão, as datas de início e fim serão anotadas.
Várias Datas
Alternativamente, pode usar este snippet que permitiria a seleção de várias datas para cada seletor de datas nos seus formulários criados com 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 );
Dentro da entrada, quaisquer datas selecionadas serão separadas por uma vírgula.
Nota: Se estiver a usar integrações de terceiros, estes formatos de data podem não ser aceites por esses serviços. Certifique-se de testar quaisquer personalizações antes de usar num formulário ativo.
E é tudo! Agora 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, usaria 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 );
Onde o 1049 dentro do window.wpforms_1049 é o ID do formulário.
Se tiver vários seletores de datas dentro de um 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 do formulário 1049, no entanto, com este exemplo, estamos também a visar apenas o seletor de datas com o ID do campo 11.
Se precisar de ajuda para encontrar o ID do seu formulário e campo, consulte este tutorial.
Q: O formulário pode usar o intervalo de datas e ainda assim limitar as datas?
R: Absolutamente! Pode usar o intervalo de datas, não permitir datas passadas e permitir apenas um número de dias a serem selecionados com antecedência. No trecho de código abaixo, estamos a visar o ID do formulário 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 a seleção de apenas até 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 seu formulário e campo, consulte este tutorial.
Q: Posso alterar o separador para o intervalo de datas?
R: Absolutamente! Para usar um separador de datas diferente no intervalo de datas, use este trecho 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 );
Apenas lembre-se de alterar rangeSeparator: ‘sep-text-goes-here’ para corresponder ao que deseja que o separador seja. Por defeito, verá um traço (-) como separador.
Q: Posso exigir um intervalo mínimo de dias a serem selecionados?
R: Absolutamente, para usar o intervalo e exigir um número mínimo de dias, basta usar este trecho 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 );
Q: Posso visar seletores de datas usando classes CSS em vez de objetos de janela?
R: Sim, pode visar seletores de datas usando classes CSS em vez de objetos de janela. Esta abordagem permite maior flexibilidade ao visar elementos específicos sem personalização extensiva.
Aqui está um exemplo usando seletores 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 visar seletores de datas com a classe CSS travel-form-date-range. Este método permite aplicar a funcionalidade de intervalo de datas a seletores de datas específicos com base na sua classe, em vez de usar IDs de formulário ou campo.
Lembre-se de substituir travel-form-date-range pela classe CSS real que está a usar para os seus campos de seletor de datas.
Posso mostrar vários meses de uma vez no calendário do seletor de datas?
Sim! Pode exibir mais de um mês de cada vez usando a opção showMonths da biblioteca Flatpickr. Isto é útil se quiser que os utilizadores vejam mais datas num relance ao selecionar um intervalo.
function wpf_dev_date_picker_range() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
mode: "range",
showMonths: 2
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );
No exemplo acima, o calendário mostrará 2 meses lado a lado ao selecionar datas. Pode alterar showMonths para qualquer número, dependendo de quantos meses deseja exibir.