Volete personalizzare il campo Date Picker per consentire la selezione di un intervallo di date o di più date all'interno del vostro modulo? Quando si consentono prenotazioni multiple in un modulo, può essere necessario dare ai visitatori la possibilità di selezionare un intervallo di date o più date. Per impostazione predefinita, in questo calendario è possibile selezionare una sola data.
In questo tutorial vi mostreremo come utilizzare PHP per fornire un intervallo di date o selezioni multiple di date per i vostri WPForm.
Nota: Quando si usano gli snippet per il Date Picker, è meglio disattivare le funzioni integrate di WPForms nel costruttore di moduli per limitare ulteriormente le date. Per ulteriori informazioni, consultare la documentazione.
Creazione del modulo
Per prima cosa è necessario creare il modulo e aggiungere almeno un campo Data/Ora e impostare il campo su Date Picker.
Se avete bisogno di assistenza per creare un modulo, consultate questa documentazione.
Consentire un intervallo di date o date multiple
Una volta creato il modulo, scegliete se volete consentire un intervallo di date o se volete consentire la selezione di più date nel modulo e aggiungete lo snippet al vostro sito.
Se avete bisogno di aiuto per aggiungere gli snippet al vostro sito, consultate questo tutorial.
Nota: se si modificano queste voci, la schermata di inserimento non supporta gli intervalli di date o le date multiple. Questo snippet è solo per gli utenti del frontend dei vostri moduli.
Intervallo di date
Questo particolare snippet consentirà a tutti i selezionatori di date 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 presentazione, saranno annotate le date di inizio e fine.
Più date
In alternativa, è possibile utilizzare questo snippet che consente di selezionare più date per ogni selezionatore di date nei 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. Assicurarsi di testare qualsiasi personalizzazione prima di utilizzarla su un modulo reale.
Ed ecco fatto! Ora siete in grado di selezionare un intervallo di date o più date nei vostri WPForm. Volete creare altre opzioni per il vostro campo Data? Provate 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 selezionatore di date all'interno di un modulo specifico?
R: Per indirizzare un modulo specifico per un intervallo di date, ad esempio, si può utilizzare 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 si hanno più selezionatori di date all'interno di un modulo specifico, con questo esempio si può puntare a un ID di campo specifico.
/**
* 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 );
Come nel primo esempio, stiamo puntando l'ID del modulo 1049, ma in questo esempio stiamo puntando solo il selezionatore di date con l'ID del campo 11.
Se avete bisogno di aiuto per trovare l'ID del modulo e del campo, consultate questa guida.
D: Il modulo può utilizzare l'intervallo di date e limitare comunque le date?
R: Assolutamente! È possibile utilizzare l'intervallo di date, non consentire date passate e consentire solo un numero di giorni da scegliere in anticipo. Nello snippet di codice qui sotto, stiamo puntando al modulo ID 1049 e il selezionatore di date del modulo sarà:
- Non consentire la selezione di date passate
- Utilizzare la funzionalità di intervallo di date
- Consentite solo fino a 14 giorni per essere selezionati
/**
* 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 avete bisogno di aiuto per trovare l'ID del modulo e del campo, consultate questa guida.
D: Posso cambiare il separatore per l'intervallo di date?
R: Assolutamente sì! Per utilizzare un separatore di date diverso nell'intervallo di date, utilizzare questo frammento di codice al posto di quello riportato 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 );
Ricordarsi di modificare rangeSeparator: 'sep-text-goes-here' in modo che corrisponda al separatore desiderato. Per impostazione predefinita, verrà visualizzato un trattino (-) come separatore.
D: Posso richiedere un intervallo minimo di giorni da selezionare?
R: Assolutamente sì, per utilizzare l'intervallo e richiedere un numero minimo di giorni, basta utilizzare questo frammento 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: È possibile indirizzare i selezionatori di date usando classi CSS invece di oggetti finestra?
R: Sì, è possibile indirizzare i selezionatori di date usando classi CSS anziché oggetti finestra. Questo approccio consente una maggiore flessibilità nel puntare a elementi specifici senza una personalizzazione estesa.
Ecco un esempio che utilizza i selettori di classe di 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, si punta ai selezionatori di date con la classe CSS travel-form-date-range. Questo metodo consente di applicare la funzionalità dell'intervallo di date a specifici selezionatori di date in base alla loro classe, anziché usare gli ID del modulo o del campo.
Ricordarsi di sostituire travel-form-date-range con la classe CSS che si sta usando per i campi del selezionatore di date.