Riassunto AI
Desideri personalizzare il campo Date Picker per consentire la selezione di un intervallo di date o di più date all'interno del tuo modulo? Quando consenti più prenotazioni in un unico modulo, potresti dover dare ai tuoi visitatori la possibilità di selezionare un intervallo di date o più date. Per impostazione predefinita, è possibile selezionare solo una singola data all'interno di questo calendario.
In questo tutorial, ti mostreremo come utilizzare PHP per fornire la selezione di un intervallo di date o di più date per i tuoi moduli WPForms.
Nota: Quando si utilizzano snippet per il Date Picker, è meglio disattivare qualsiasi funzionalità integrata che WPForms fornisce nell'editor del modulo per limitare ulteriormente le date. Per maggiori informazioni, consulta questa documentazione.
Creazione del modulo
Per prima cosa, dovrai creare il tuo modulo e aggiungere almeno un campo modulo Data/Ora e impostare il campo su Date Picker.
Se hai bisogno di assistenza nella creazione di un modulo, esamina questa documentazione.
Consentire un intervallo di date o più date
Una volta creato il tuo modulo, scegli se desideri consentire un intervallo di date o più date da selezionare nel tuo modulo e aggiungi lo snippet al tuo sito.
Se hai bisogno di aiuto su come aggiungere snippet al tuo sito, consulta questo tutorial.
Nota: Si prega di notare che se si modificano queste voci, la schermata delle voci non supporta intervalli di date o più date. Questo snippet è solo per gli utenti frontend dei tuoi moduli.
Intervallo di date
Questo particolare snippet consentirà a tutti i date picker di selezionare un intervallo di date per tutti i moduli.
/**
* 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 );
All'interno della voce di invio, verranno indicate le date di inizio e fine.
Date multiple
In alternativa, puoi utilizzare questo snippet che consentirebbe la selezione di più date per ogni date picker sui tuoi moduli creati con 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 );
All'interno della voce, le date selezionate saranno separate da una virgola.
Nota: Se si utilizzano integrazioni di terze parti, questi formati di data potrebbero non essere accettati da tali servizi. Assicurati di testare eventuali personalizzazioni prima di utilizzarle su un modulo live.
E il gioco è fatto! Ora sei in grado di selezionare un intervallo di date o più date sui tuoi moduli WPForms. Desideri creare altre opzioni per il tuo campo Data? Prova l'articolo su Come creare formati aggiuntivi per il campo Data.
Azione di riferimento
FAQ
D: Come posso indirizzare un singolo modulo o un singolo date picker all'interno di un modulo specifico?
R: Per indirizzare un modulo specifico per l'intervallo di date, ad esempio, useresti questo 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 );
Mentre il 1049 all'interno di window.wpforms_1049 è l'ID del modulo.
Se hai più date picker all'interno di un modulo specifico, potresti indirizzare un ID di campo specifico con questo esempio.
/**
* 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 );
Proprio come con il primo esempio, stiamo indirizzando l'ID del modulo 1049, tuttavia con questo esempio stiamo anche indirizzando solo il date picker con l'ID del campo 11.
Se hai bisogno di aiuto per trovare l'ID del tuo modulo e campo, guarda questo tutorial.
D: Il modulo può utilizzare l'intervallo di date e comunque limitare le date?
R: Assolutamente! Puoi usare l'intervallo di date, non consentire date passate e consentire solo un certo numero di giorni da scegliere in anticipo. Nello snippet di codice seguente, stiamo prendendo di mira l'ID del modulo 1049 e il selettore di date del modulo:
- Non consentire la selezione di date passate
- Utilizza la funzionalità dell'intervallo di date
- Consenti la selezione di un massimo di 14 giorni
/**
* 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 hai bisogno di aiuto per trovare l'ID del tuo modulo e campo, guarda questo tutorial.
D: Posso cambiare il separatore per l'intervallo di date?
R: Assolutamente! Per utilizzare un separatore di date diverso sull'intervallo di date, usa questo snippet di codice invece di quello sopra.
/**
* 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 );
Ricorda solo di cambiare rangeSeparator: ‘sep-text-goes-here’ per far corrispondere ciò che desideri sia il separatore. Per impostazione predefinita, vedrai un trattino (-) come separatore.
D: Posso richiedere un intervallo minimo di giorni da selezionare?
R: Assolutamente, per utilizzare l'intervallo e richiedere un numero minimo di giorni, usa semplicemente questo snippet di codice.
/**
* 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 );
D: Posso selezionare i selettori di date utilizzando classi CSS invece di oggetti window?
R: Sì, puoi selezionare i selettori di date utilizzando classi CSS invece di oggetti window. Questo approccio consente una maggiore flessibilità nel selezionare elementi specifici senza personalizzazioni estese.
Ecco un esempio che utilizza selettori di classi 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);
In questo esempio, stiamo selezionando i selettori di date con la classe CSS travel-form-date-range. Questo metodo ti consente di applicare la funzionalità dell'intervallo di date a selettori di date specifici in base alla loro classe, anziché utilizzare ID di moduli o campi.
Ricorda di sostituire travel-form-date-range con la classe CSS effettiva che stai utilizzando per i tuoi campi selettore di date.
Posso mostrare più mesi contemporaneamente nel calendario del selettore di date?
Sì! Puoi visualizzare più di un mese alla volta utilizzando l'opzione showMonths della libreria Flatpickr. Questo è utile se desideri che gli utenti vedano più date a colpo d'occhio quando selezionano un intervallo.
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 );
Nell'esempio sopra, il calendario mostrerà 2 mesi uno accanto all'altro durante la selezione delle date. Puoi cambiare showMonths in qualsiasi numero a seconda di quanti mesi desideri visualizzare.