Riassunto AI
Vorresti che il tuo date picker si caricasse con una data predefinita? Quando si utilizza il formato Date Picker sul campo modulo Data/Ora, è possibile selezionare facilmente una data da una finestra popup. Ma sapevi che puoi anche impostare facilmente una data predefinita per questo campo che inizia con la data odierna? In questo tutorial, ti mostreremo come ottenere questo risultato.
È importante ricordare che se stai utilizzando uno snippet di codice per limitare il campo Date Picker, tutte le opzioni del generatore di moduli per la limitazione dovrebbero essere disattivate.
Creazione del modulo
Innanzitutto, dovrai creare il tuo modulo e aggiungere il campo modulo Data/Ora al tuo modulo. Nella scheda Avanzate, assicurati di aver selezionato Date Picker per il Tipo.
Se hai bisogno di assistenza nella creazione del tuo modulo, ti preghiamo di consultare questo tutorial.
Si prega di notare che gli snippet di esempio in questo tutorial sono specifici per esempi di utilizzo singolo. Se hai intenzione di utilizzare diversi snippet di codice contemporaneamente, dovrai assicurarti che ogni nome di funzione sia univoco oppure puoi raggrupparli tutti in un'unica funzione.
Impostazione della data predefinita
Con uno qualsiasi degli snippet, dovrai copiarli e incollarli sul tuo sito. Se hai bisogno di aiuto su come aggiungere snippet al tuo sito, ti preghiamo di consultare questo tutorial.
Aggiunta dello snippet di codice per tutti i date picker
/**
* 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 );
Aggiunta dello snippet di codice per i date picker all'interno di un modulo specifico
Per impostare una data predefinita per i Datepicker all'interno di un modulo specifico, puoi utilizzare questo snippet ma cambiare _1287 per corrispondere al tuo ID modulo. Se hai bisogno di aiuto su come trovare il tuo ID modulo, ti preghiamo di consultare questo 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 );
Aggiunta dello snippet di codice per un campo date picker specifico all'interno di un modulo specifico
Per impostare una data predefinita per un campo specifico all'interno di un modulo specifico, puoi utilizzare questo snippet ma cambiare _1287 per corrispondere al tuo ID modulo e aggiornare _4 per corrispondere all'ID del campo. Se hai bisogno di aiuto su come trovare il tuo ID modulo, ti preghiamo di consultare questo 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 questo è tutto ciò che ti serve per impostare una data predefinita. Quando la pagina viene caricata, il campo Data caricherà automaticamente la data corrente.
Vorresti anche imparare come impostare un intervallo di date o date multiple che possono essere selezionate dal tuo date picker? Dai un'occhiata al nostro articolo su Come consentire intervalli di date o date multiple nel Date Picker.
Azione di riferimento
FAQ
Posso semplicemente impostare una data predefinita tramite un nome di classe CSS personalizzato?
R: Assolutamente! Innanzitutto, assicurati di aver aggiunto un nome di classe al tuo campo modulo Data/Ora dalla scheda Avanzate.
Nel nostro esempio, il nome della classe CSS che stiamo utilizzando è customdatecode.
Una volta salvato il nome della classe CSS del modulo, aggiungi questo snippet di codice al tuo sito.
/**
* 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 );
Ora, su qualsiasi modulo che contenga un selettore di data con quel nome di classe CSS, la data odierna verrà automaticamente impostata per quel campo.
D: Funzionerà sui dispositivi mobili?
R: I dispositivi mobili variano tutti con la funzionalità predefinita del sistema operativo, quindi la data non verrà inserita automaticamente quando visualizzata da dispositivi mobili.
D: Come posso impostare la data minima e la data predefinita per la data corrente?
R: Assolutamente! Per impostare la data predefinita e la data minima sul tuo selettore di data alla data odierna, usa semplicemente questo snippet.
/**
* 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 );