Resumo de IA
Gostaria que seu seletor de data carregasse com uma data padrão? Ao usar o formato Seletor de Data no campo de formulário Data/Hora, você pode facilmente selecionar uma data em uma janela pop-up. Mas você sabia que também pode definir facilmente uma data padrão para este campo que começa com a data de hoje? Neste tutorial, mostraremos como conseguir isso.
É importante lembrar que, se você estiver usando um trecho de código para limitar o campo Seletor de Data, quaisquer opções do construtor de formulários para limitação devem ser desativadas.
Criando o formulário
Primeiro, você precisará criar seu formulário e adicionar o campo de formulário Data/Hora ao seu formulário. Na guia Avançado, certifique-se de ter selecionado Seletor de Data para o Tipo.
Se precisar de ajuda para criar seu formulário, revise este tutorial.
Observe que os trechos de exemplo neste tutorial são especificamente para exemplos de uso único. Se você planeja usar vários desses trechos de código ao mesmo tempo, precisará garantir que cada nome de função seja exclusivo ou poderá agrupá-los todos em uma única função.
Definindo a data padrão
Com qualquer um dos trechos, você precisará copiá-los e colá-los em seu site. Se precisar de ajuda sobre como adicionar trechos ao seu site, revise este tutorial.
Adicionando o trecho de código para todos os seletores de data
/**
* Set today's date as default date for all date pickers.
*
* @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
*/
function wpf_dev_date_picker_default() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
defaultDate: "today",
disableMobile: "true"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );
Adicionando o trecho de código para seletores de data dentro de um formulário específico
Para definir uma data padrão para os Seletores de Data dentro de um formulário específico, você pode usar este trecho, mas altere o _1287 para corresponder ao seu próprio ID de formulário. Se precisar de ajuda sobre como encontrar seu ID de formulário, consulte este tutorial.
/**
* Set today's date as default date for all date pickers inside the specific form.
*
* @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
*/
function wpf_dev_date_picker_default() {
?>
<script type="text/javascript">
// Run this on all date pickers inside the form ID 1287
window.wpforms_1287 = window.wpforms_1287 || {};
window.wpforms_1287.datepicker = {
defaultDate: "today",
disableMobile: "true"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );
Adicionando o trecho de código para um campo seletor de data específico dentro de um formulário específico
Para definir uma data padrão para um campo específico dentro de um formulário específico, você pode usar este trecho, mas altere o _1287 para corresponder ao seu próprio ID de formulário e atualize o _4 para corresponder ao ID do campo. Se precisar de ajuda sobre como encontrar seu ID de formulário, consulte este tutorial.
/**
* Set today's date as default date for a specific date picker inside a specific form.
*
* @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
*/
function wpf_dev_date_picker_default() {
?>
<script type="text/javascript">
// Run this on the date field ID 4 inside the form ID 1287
window.wpforms_1287_4 = window.wpforms_1287_4 || {};
window.wpforms_1287_4.datepicker = {
defaultDate: "today",
disableMobile: "true"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );
E é tudo o que você precisa para definir uma data padrão. Quando a página carregar, o campo Data carregará automaticamente a data atual.
Gostaria também de aprender como definir um intervalo de datas ou várias datas que podem ser selecionadas em seu seletor de datas? Confira nosso artigo sobre Como Permitir Intervalo de Datas ou Múltiplas Datas no Seletor de Datas.
Ação de Referência
Perguntas Frequentes
Posso definir uma data padrão apenas por um nome de classe CSS personalizado?
R: Com certeza! Primeiro, certifique-se de ter adicionado um nome de classe ao seu campo de formulário Data/Hora na guia Avançado.
Em nosso exemplo, o nome da classe CSS que estamos usando é customdatecode.
Depois de salvar o nome da classe CSS do formulário, adicione este trecho de código ao seu site.
/**
* Set today's date as default date for all date pickers from a CSS class name.
*
* @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
*/
function wpf_dev_date_picker_default() {
?>
<script type="text/javascript">
jQuery( '.customdatecode' ).each( function () {
var form = jQuery( this ).closest( '.wpforms-form' ),
formID = form.data( 'formid' ),
fieldID = jQuery(this).data('field-id' );
window['wpforms_' + formID + '_' + fieldID] = {
datepicker: {
defaultDate: 'today',
disableMobile: 'true'
}
}
} );
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );
Agora, em qualquer formulário que tenha um seletor de data dentro dele com esse nome de classe CSS, ele definirá automaticamente a data de hoje como a data desse campo.
P: Isso funcionará em dispositivos móveis?
R: Todos os dispositivos móveis variam com a funcionalidade padrão do sistema operacional, portanto a data não será preenchida automaticamente ao visualizar de dispositivos móveis.
P: Como posso definir a data mínima e a data padrão para a data atual?
R: Com certeza! Para definir a data padrão e a data mínima no seu seletor de data como a data de hoje, basta usar este trecho de código.
/**
* Set today's date as the default and minimum date for all date pickers.
*
* @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
*/
function wpf_dev_date_picker_default() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
defaultDate: "today",
minDate: "today",
disableMobile: "true"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );