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 em seu formulário? Ao permitir várias reservas em um único formulário, você pode precisar dar aos seus visitantes a capacidade de selecionar um intervalo de datas ou várias datas. Por padrão, apenas uma única data pode ser selecionada neste calendário.
Neste tutorial, mostraremos como usar PHP para fornecer um intervalo de datas ou seleções de várias datas para o seu WPForms.
Observação: Ao usar snippets para o Seletor de Datas, é melhor desativar quaisquer recursos integrados que o WPForms oferece no construtor de formulários para restringir ainda mais as datas. Para mais informações, consulte esta documentação.
Criando o formulário
Primeiro, você precisará criar seu formulário e adicionar pelo menos um campo de formulário Data/Hora e definir o campo como Seletor de Datas.
Se precisar de alguma assistência na criação de um formulário, revise esta documentação.
Permitindo um intervalo de datas ou várias datas
Depois que seu formulário for criado, escolha se deseja permitir um intervalo de datas ou várias datas para serem selecionadas em seu formulário e adicione esse snippet ao seu site.
Se precisar de ajuda sobre como adicionar snippets ao seu site, consulte este tutorial.
Observação: Observe que, se você editar essas entradas, a tela de entrada não suporta intervalos de datas ou várias datas. Este snippet é apenas para os usuários de frontend dos seus formulários.
Intervalo de Datas
Este snippet específico permitirá que todos os seletores de data 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 da submissão, as datas de início e fim serão anotadas.
Várias Datas
Alternativamente, você pode usar este snippet que permitiria a seleção de várias datas para cada seletor de data em 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.
Observação: Se estiver usando integrações de terceiros, esses formatos de data podem não ser aceitos por esses serviços. Certifique-se de testar quaisquer personalizações antes de usar em um formulário ativo.
E é isso! Agora você pode selecionar um intervalo de datas ou várias datas em 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
Perguntas Frequentes
P: Como posso direcionar um único formulário ou um único seletor de data dentro de um formulário específico?
R: Para direcionar um formulário específico para o intervalo de datas, como exemplo, você 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 de window.wpforms_1049 é o ID do formulário.
Se você tiver vários seletores de data dentro de um formulário específico, poderá 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 );
Assim como no primeiro exemplo, estamos direcionando o ID do formulário 1049, no entanto, com este exemplo, também estamos direcionando apenas o seletor de data com o ID de campo 11.
Se precisar de ajuda para encontrar o ID do seu formulário e campo, consulte este tutorial.
P: O formulário pode usar o intervalo de datas e ainda limitar as datas?
R: Com certeza! Você pode usar o intervalo de datas, não permitir datas passadas e permitir apenas um número de dias para serem selecionados com antecedência. No trecho de código abaixo, estamos visando o ID do formulário 1049 e o seletor de datas do formulário irá:
- Não permitir a seleção de datas passadas
- Usar a funcionalidade de intervalo de datas
- Permitir apenas até 14 dias para serem selecionados
/**
* 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.
P: Posso alterar o separador para o intervalo de datas?
R: Com certeza! 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 você deseja que o separador seja. Por padrão, você verá um traço (-) como separador.
P: Posso exigir um intervalo mínimo de dias para serem selecionados?
R: Com certeza, 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 );
P: Posso direcionar seletores de data usando classes CSS em vez de objetos de janela?
R: Sim, você pode direcionar seletores de data usando classes CSS em vez de objetos de janela. Essa abordagem permite maior flexibilidade ao direcionar 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 direcionando seletores de data com a classe CSS travel-form-date-range. Este método permite aplicar a funcionalidade de intervalo de datas a seletores de data específicos com base em 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 você está usando para seus campos de seletor de data.
Posso mostrar vários meses ao mesmo tempo no calendário do seletor de datas?
Sim! Você pode exibir mais de um mês por vez usando a opção showMonths da biblioteca Flatpickr. Isso é útil se você quiser que os usuários vejam mais datas rapidamente 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. Você pode alterar showMonths para qualquer número, dependendo de quantos meses deseja exibir.