Resumo de IA
Gostaria que o seu seletor de data carregasse com uma data predefinida? Ao usar o formato Seletor de Data no campo de formulário Data/Hora, pode facilmente selecionar uma data numa janela pop-up. Mas sabia que também pode definir facilmente uma data predefinida para este campo que começa com a data de hoje? Neste tutorial, mostraremos como conseguir isto.
É importante lembrar que, se estiver a usar um trecho de código para limitar o campo Seletor de Data, quaisquer opções do construtor de formulários para limitar devem ser desativadas.
Criação do formulário
Primeiro, terá de criar o seu formulário e adicionar o campo de formulário Data/Hora ao seu formulário. Na aba Avançadas, certifique-se de que selecionou Seletor de Data para o Tipo.
Se precisar de alguma assistência na criação do seu formulário, por favor, reveja este tutorial.
Por favor, note que os trechos de exemplo neste tutorial são especificamente para exemplos de uso único. Se estiver a planear usar vários destes trechos de código ao mesmo tempo, terá de garantir que cada nome de função é único ou pode agrupá-los todos numa única função.
Definir a data predefinida
Com quaisquer dos trechos, terá de os copiar e colar no seu site. Se precisar de ajuda sobre como adicionar trechos ao seu site, por favor, reveja este tutorial.
Adicionar 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 );
Adicionar o trecho de código para seletores de data dentro de um formulário específico
Para definir uma data predefinida para os Seletores de Data dentro de um formulário específico, 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 o seu ID de formulário, por favor, 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 );
Adicionar o trecho de código para um campo seletor de data específico dentro de um formulário específico
Para definir uma data predefinida para um campo específico dentro de um formulário específico, 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 o seu ID de formulário, por favor, 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 precisa para definir uma data predefinida. 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 datas múltiplas que podem ser selecionadas a partir do seu seletor de data? Consulte o nosso artigo sobre Como Permitir Intervalo de Datas ou Datas Múltiplas no Seletor de Data.
Ação de Referência
FAQ
Posso apenas definir uma data predefinida por um nome de classe CSS personalizado?
R: Absolutamente! Primeiro, certifique-se de que adicionou um nome de classe ao seu campo de formulário Data/Hora a partir da aba Avançadas.
No nosso exemplo, o nome da classe CSS que estamos a usar é customdatecode.
Depois de guardar 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.
Q: Isto funcionará em dispositivos móveis?
R: Os dispositivos móveis variam com a funcionalidade padrão do SO, portanto, a data não será preenchida automaticamente ao visualizar a partir de dispositivos móveis.
Q: Como posso definir a data mínima e a data padrão para a data atual?
R: Absolutamente! Para definir a data padrão e a data mínima no seu seletor de data para 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 );