Como permitir o intervalo de datas ou várias datas no seletor de datas

Atualizado:

Gostaria de personalizar o campo Date Picker 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 formulário, talvez seja necessário oferecer aos visitantes a possibilidade de selecionar um intervalo de datas ou várias datas. Por padrão, somente uma única data pode ser selecionada nesse calendário.

Neste tutorial, mostraremos como usar o PHP para fornecer um intervalo de datas ou várias seleções de datas para seus WPForms.

Observação: ao usar snippets para o Date Picker, é melhor desativar qualquer um dos recursos internos que o WPForms oferece no construtor de formulários para restringir ainda mais as datas. Para obter mais informações, consulte esta documentação.

Criando o formulário

Primeiro, você precisará criar o formulário e adicionar pelo menos um campo de formulário de data/hora e definir o campo como Date Picker.

Se precisar de ajuda para criar um formulário, consulte esta documentação.

basta criar seu formulário e adicionar seu campo de seleção de data ao formulário

Permitir um intervalo de datas ou várias datas

Depois que o formulário for criado, escolha se deseja permitir um intervalo de datas ou várias datas a serem selecionadas no formulário e adicione esse snippet ao 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 será compatível com intervalo de datas ou várias datas. Esse snippet é apenas para os usuários de front-end dos seus formulários.

Intervalo de datas

Esse 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 );
Seu usuário pode selecionar um intervalo de datas no seletor de datas

Na entrada do envio, as datas de início e término serão anotadas.

O intervalo de datas será exibido na entrada do formulário com um from e um to

Várias datas

Como alternativa, você pode usar este snippet que permite que várias datas sejam selecionadas para cada seletor de data em 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 );
O usuário agora pode selecionar várias datas no seletor de datas

Na entrada, todas as datas selecionadas serão separadas por uma vírgula.

As várias datas serão exibidas na entrada do formulário e separadas por ponto e 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 todas as personalizações antes de usá-las 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 seu campo de data? Experimente o artigo sobre Como criar formatos adicionais para o campo de data.

Ação de referência

wpforms_wp_footer_end

PERGUNTAS FREQUENTES

P: Como posso direcionar um único formulário ou um único seletor de data em um formulário específico?

R: Para direcionar um formulário específico para o intervalo de datas, por 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 );

Já o 1049 dentro de window.wpforms_1049 é o ID do formulário.

Se você tiver vários seletores de data em 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, mas neste exemplo também estamos direcionando apenas o selecionador de data 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 usar o intervalo de datas e ainda assim limitar as datas?

R: Sem dúvida! Você pode usar o intervalo de datas, não permitir datas passadas e permitir que apenas um número de dias seja escolhido com antecedência. No trecho de código abaixo, estamos direcionando o formulário ID 1049 e o seletor de datas do formulário irá:

  1. Não permitir a seleção de datas anteriores
  2. Use a funcionalidade de intervalo de datas
  3. Permitir apenas a seleção de 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 formulário e do campo, consulte este tutorial.

P: Posso alterar o separador do intervalo de datas?

R: Com certeza! Para usar um separador de data 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 );

Lembre-se apenas de alterar rangeSeparator: 'sep-text-goes-here' para corresponder ao que você deseja que seja o separador. Por padrão, você verá um traço (-) como separador.

P: Posso exigir um intervalo mínimo de dias a ser selecionado?

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 os seletores de data usando classes CSS em vez de objetos de janela?

R: Sim, você pode direcionar os selecionadores de data usando classes CSS em vez de objetos de janela. Essa abordagem permite mais flexibilidade na segmentação de 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 os selecionadores de data com a classe CSS travel-form-date-range. Esse método permite que você aplique a funcionalidade de intervalo de datas a selecionadores de datas 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 com a classe CSS real que você está usando para os campos do seletor de data.

Tagged
Ainda está preso? Como podemos ajudar?
Última atualização em 21 de outubro de 2024