Riassunto AI
Desideri personalizzare le opzioni di data del campo data e ora in WPForms? Il campo Data / Ora include due opzioni di formato per il selettore di data: Date Picker, che fornisce all'utente un calendario, o Date Dropdown.
Con il rilascio della versione 1.6.3, WPForms ti offre opzioni all'interno del generatore di moduli per Limitare i giorni e persino Disabilitare le date passate, oltre a Limitare le ore. Se è tutto ciò che devi fare, consulta questa documentazione.
Questo tutorial si concentrerà maggiormente sulla personalizzazione del campo Date Dropdown e sul calcolo dei blocchi di date per il Date Picker.
È importante ricordare che se stai utilizzando uno qualsiasi degli snippet di codice in questo documento, le opzioni del generatore di moduli per la limitazione dovrebbero essere disattivate. Per saperne di più sulle opzioni integrate per la limitazione delle date, dai un'occhiata a questa documentazione.
Creazione del modulo
Prima di aggiungere eventuali snippet, dovrai creare il tuo modulo e aggiungere i tuoi campi. Poiché questo tutorial si basa sul campo Date Dropdown, dovrai aggiungere almeno un campo Data.
Se hai bisogno di assistenza nella creazione del tuo modulo, consulta questo tutorial.
Una volta aggiunti i campi data, assicurati di aver selezionato il Tipo su Date Dropdown. Puoi impostare il Tipo di data facendo clic sulle opzioni Avanzate del campo del modulo.
Personalizzazione del campo Data
Per personalizzare il campo Data, dovrai aggiungere uno degli snippet di codice sottostanti al tuo sito.
Se hai bisogno di aiuto per imparare come aggiungere snippet di codice al tuo sito, consulta questo tutorial.
Alcuni degli snippet di codice sottostanti richiederanno l'uso di informazioni specifiche sull'ID del modulo e ID del campo.
Utilizzo di snippet sul Date Dropdown
Limitare il numero di giorni nel menu a discesa per corrispondere al mese
Per far coincidere il campo Giorni con la quantità di giorni disponibili per quel particolare mese, useresti questo snippet.
/**
* Limit the days dropdown to match how many days are available for the selected month.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_days_dropdown_match_month( ) {
?>
<script type="text/javascript">
var date = new Date();
var month = date.getMonth();
var year = date.getFullYear();
var totalDays = 31; // Default day amount
jQuery(function($){
$( 'select[id$="-month"]' ).on( 'change', function(){
month = $(this).val();
totalDays = daysInMonth(month, year);
$(this).parent().find( 'select[id$="-day"] option:not(:first-child)').each(function(){
$(this).remove();
});
for (var i = 1; i <= totalDays; i++) {
$(this).parent().find( 'select[id$="-day"]' ).append($( "<option></option>" ).attr( "value", i).text(i));
}
});
$( 'select[id$="-year"]' ).on( 'change', function(){
year = $(this).val();
totalDays = daysInMonth(month, year);
$(this).parent().find( 'select[id$="-day"] option:not(:first-child)').each(function(){
$(this).remove();
});
for (var i = 1; i <= totalDays; i++) {
$(this).parent().find('select[id$="-day"]').append($( "<option></option>" ).attr( "value", i).text(i));
}
});
});
function daysInMonth (month, year) {
return new Date(year, month, 0).getDate();
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_days_dropdown_match_month', 30 );
Limitare mesi, giorni e anni all'interno del menu a discesa delle date
Gli snippet sottostanti aggiorneranno i campi a discesa per visualizzare solo dal 5 al 12 (maggio-dicembre) per i mesi disponibili, dal 20 al 31 per i giorni disponibili e dal 2020 al 2021 per gli anni disponibili. Puoi modificare i campi secondo necessità.
Ci sono due modi diversi in cui questo può essere applicato:
- Tutti i campi a discesa delle date all'interno di un modulo specifico
- Un campo a discesa delle date specifico all'interno di un modulo specifico.
Tutti i campi a discesa delle date all'interno di un modulo specifico
Lo snippet sottostante si applicherà solo al modulo con ID 10.
/**
* Filters labels and options within the date field’s dropdown format.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_datetime_date_dropdowns( $args, $form_id, $field ) {
$form_id = (int) $form_id;
// Only apply if the form's ID is 10
if ( $form_id === 10 ) {
// Set the lower and upper limits for each date dropdown
$args[ 'months' ] = range( 5, 12 );
$args[ 'days' ] = range( 20, 31 );
$args[ 'years' ] = range( 2024, 2025 );
}
return $args;
}
add_filter( 'wpforms_datetime_date_dropdowns', 'wpf_dev_datetime_date_dropdowns', 10, 3 );
Targeting di un campo a discesa delle date specifico all'interno di un modulo specifico
Sottostante si applicherà al campo a discesa delle date con ID campo 3 all'interno del modulo con ID 10.
/**
* Filters labels and options within the date field’s dropdown format.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_datetime_date_dropdowns( $args, $form_id, $field ) {
$form_id = (int) $form_id;
// Only apply if the form's ID is 10 and field ID 3
if ( $form_id === 10 && $field['id'] == 3) {
// Set the lower and upper limits for each date dropdown
$args[ 'months' ] = range( 5, 12 );
$args[ 'days' ] = range( 20, 31 );
$args[ 'years' ] = range( 2024, 2025 );
}
return $args;
}
add_filter( 'wpforms_datetime_date_dropdowns', 'wpf_dev_datetime_date_dropdowns', 10, 3 );
Avviare il menu a discesa delle date da 'oggi'
Nel tuo Menu a discesa Data, puoi impostare che Mese, Giorno e Anno vengano predefiniti automaticamente con il mese, il giorno e l'anno odierni utilizzando questo snippet.
/**
* Select from today's date going forward within the range limit specified below
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_datetime_date_dropdowns( $args, $form_id, $field ) {
if( $form_id != 143 ) {
return $args;
}
// Set the lower and upper limits for each date dropdown
$args[ 'months' ] = range( date('m'), 12 );
$args[ 'days' ] = range( date('d'), 31 );
$args[ 'years' ] = range( date('Y'), 2030 );
return $args;
}
add_filter( 'wpforms_datetime_date_dropdowns', 'wpf_dev_datetime_date_dropdowns', 10, 3 );
Utilizzo di snippet sul Selettore Data
Disabilitare date passate e visualizzare solo i prossimi 31 giorni
In questo snippet, disabiliteremo qualsiasi data passata e consentiremo la selezione solo fino a 31 giorni dalla data corrente per l'ID modulo 1137 e l'ID campo 14. Ricorda di modificare questi ID per farli corrispondere al tuo modulo e ID campo. Se non sei sicuro di dove trovare questi ID, consulta questo tutorial.
/**
* Disable past dates, allow for selection for today + the next 31 days
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_limit_date_picker() {
?>
<script type="text/javascript">
var d = new Date();
window.wpforms_1137_14 = window.wpforms_1137_14 || {};
window.wpforms_1137_14.datepicker = {
disableMobile: true,
// Don't allow users to pick dates less than 1 days out
minDate: d.setDate(d.getDate()),
maxDate: d.setDate(d.getDate() + 31),
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_limit_date_picker', 10 );
Mostra date da ieri, oggi e domani
Utilizzando il nuovo Date().fp_incr(-1) puoi controllare facilmente quanti giorni minDate e maxDate visualizzare semplicemente aumentando il numero. L'uso del simbolo negativo (-) davanti al numero significa che si tratterà di giorni passati.
Poiché vogliamo che il nostro modulo inizi solo da ieri, inizieremo con minDate consentendo solo (-1) e finiremo con (1) (quindi includerà oggi e domani) per maxDate
/**
* Allow date picker yesterday, today, and tomorrow
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick past dates
minDate: new Date().fp_incr(-1), // 1 day in the past
// Don't allow users to pick any more than today
maxDate: new Date().fp_incr(1) // 1 day in the future
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Mostra date dal giorno successivo in poi per il selettore data
Puoi facilmente usare questo snippet di codice che escluderà tutti i giorni passati (incluso oggi).
Cambia semplicemente il +1), per indicare quanti giorni in futuro desideri limitare il selettore.
/**
* Show dates from the next day and onwards
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_limit_date_picker() {
?>
<script type="text/javascript">
var d = new Date();
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick dates less than 1 days out
minDate: d.setDate(d.getDate() + 1),
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_limit_date_picker', 10 );
Blocca intervalli di date specifici per il selettore data
Per bloccare intervalli di date specifici all'interno del selettore data, usa questo snippet.
/**
* Limit the dates available in the Date Time date picker: Block out certain date ranges
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_limit_date_picker() {
?>
<script type="text/javascript">
var d = new Date();
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick specific range of dates
disable: [
{
from: "2024-12-24",
to: "2024-12-26"
},
{
from: "2024-12-31",
to: "2025-01-01"
}
]
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_limit_date_picker', 10 );
Consenti solo date specifiche del mese
Se desideri che gli utenti selezionino solo determinati giorni del mese nel Selettore Data, puoi utilizzare lo snippet qui sotto. In questo esempio, solo il 5° e il 20° di ogni mese rimangono selezionabili e tutte le altre date sono disabilitate.
Per modificare i giorni consentiti, sostituisci i numeri dei giorni nella riga 23 (la condizione che controlla il valore del giorno) con i giorni che desideri utilizzare.
Puoi sostituire 5 e 20 alla riga 16 con qualsiasi altro numero di data per soddisfare le tue esigenze.
Limita fino a quando gli utenti possono selezionare le date all'interno del selettore data
Se desideri limitare la data futura che gli utenti possono selezionare all'interno del selettore data, usa questo snippet di codice.
/**
* Don't allow date to be selected after maxDate
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick past dates
minDate: new Date(),
// Don't allow users to pick dates after Dec 31, 2025
maxDate: new Date( '2025-12-31' )
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Escludi tutti i giorni passati e i lunedì nel selettore data
Per limitare tutti i giorni passati e i lunedì futuri, usa questo snippet.
/**
* Don't allow users to pick Mondays
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick past dates
minDate: new Date(),
// Don't allow users to pick Mondays
enable: [
function(dateObj){
return dateObj.getDay() !== 1;
}
]
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Visualizza messaggio quando viene selezionata la data corrente
Per questo esempio, visualizzeremo un messaggio pop-up quando viene selezionata la data corrente.
/**
* Display pop up message when current date is selected
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_check_date() {
?>
<script type="text/javascript">
// Only display the message if the form ID is 323 and the field ID is 4
window.wpforms_323_4 = window.wpforms_323_4 || {};
window.wpforms_323_4.datepicker = {
mode: "single",
onClose: function(selectedDates, dateStr, instance) {
var today = new Date();
if (selectedDates[0].toLocaleDateString("en-US") == today.toLocaleDateString("en-US")) {
alert( 'Custom Message: You have selected todays date' );
this.clear();
}
}
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_check_date', 10 );
Disabilita un giorno specifico della settimana
Per questo esempio, vogliamo disabilitare completamente le domeniche dal nostro selettore data utilizzando questo snippet.
/**
* Disable a specific day of the week
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_limit_date_picker_disable_specific_weekday() {
?>
<script type="text/javascript">
var d = new Date();
// Only apply to the form ID 420 and the field ID 1
window.wpforms_420_1 = window.wpforms_420_1 || {};
window.wpforms_420_1.datepicker = {
disableMobile: true,
// Don't allow users to pick specific day of the week
disable: [
function(date) {
// return true to disable
// 1 = Monday; 2 = Tuesday; 3 = Wednesday; 4 = Thursday; 5 = Friday; 6 = Saturday; 0 = Sunday
return (date.getDay() === 0);
}
]
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_limit_date_picker_disable_specific_weekday', 10 );
Nello snippet, return (date.getDay() === 0); disabilita solo le domeniche. Ogni giorno è rappresentato da un numero specifico.
- 1 = Lunedì
- 2 = Martedì
- 3 = Mercoledì
- 4 = Giovedì
- 5 = Venerdì
- 6 = Sabato
- 7 = Domenica
Trova semplicemente la rappresentazione numerica per il tuo giorno specifico e aggiorna lo snippet per corrispondere al giorno desiderato.
La window.wpforms_420_1 rappresenta l'ID del modulo (420) e l'ID del campo per il nostro Selettore Data (_1). Dovrai aggiornare questi due ID per farli corrispondere al tuo ID modulo e ID campo.
Per assistenza nel trovare i numeri ID del tuo modulo e campo, consulta questo tutorial.
Cambia il giorno di inizio del calendario
Per cambiare il giorno del selettore data che mostra l'inizio della settimana, userai questo snippet. Tieni presente che Lunedì rappresenta il numero uno e i giorni della settimana continuano in ordine numerico.
/**
* Change the start day of the week
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_set_start_day() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
"locale": {
// Enter the number for the day you want the week to start
// 1 = Monday; 2 = Tuesday; 3 = Wednesday; 4 = Thursday; 5 = Friday; 6 = Saturday; 7 = Sunday
"firstDayOfWeek": 1 // start week on Monday
}
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_set_start_day', 10 );
Disabilitare date future
Usare questo snippet imposterà la maxDate come data odierna (corrente) in modo che gli utenti non possano selezionare date future.
/**
* Disable future dates
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick past dates
maxDate: new Date(),
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Target specificare ID modulo e ID campo all'interno del selettore data
Quando si utilizza il Selettore Data, è possibile targettizzare un singolo modulo o un campo Data specifico all'interno di un modulo specifico.
Negli snippet di esempio seguenti, vedrai window.wpforms_21_1. Dove _21 rappresenta l'ID del modulo e _1 rappresenta l'ID del campo.
Se hai bisogno di aiuto per trovare i numeri ID del tuo modulo e campo, consulta questo tutorial.
Ecco un paio di snippet di codice. Il primo consentirà la selezione solo degli ultimi 30 giorni:
/**
* Only allow for a selection of only the past 30 days
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_21_1 = window.wpforms_21_1 || {};
window.wpforms_21_1.datepicker = {
disableMobile: true,
// Don't allow users to pick more than 30 days in the past and exclude future dates
minDate: new Date().fp_incr(-30)
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Questo prossimo snippet di codice consentirà la selezione degli ultimi 30 giorni e "oggi":
/**
* Only allow for a selection of the past 30 days and "today"
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_21_1 = window.wpforms_21_1 || {};
window.wpforms_21_1.datepicker = {
disableMobile: true,
// Don't allow users to pick more than 30 days in the past
minDate: new Date().fp_incr(-30),
maxDate: "today"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Limita a un singolo giorno per il mese corrente
In questo esempio, accetteremo appuntamenti solo per un singolo giorno del mese corrente.
/**
* Limit to 1 single day for the current month only.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_one_day_current_month( ) {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
disable: [
function(date) {
var currentDate = new Date();
var currentMonth = currentDate.getMonth();
var currentYear = currentDate.getFullYear();
var selectedMonth = date.getMonth();
var selectedYear = date.getFullYear();
if (selectedMonth !== currentMonth || selectedYear !== currentYear) {
return false;
}
var day = date.getDay();
var firstDayOfMonth = new Date(selectedYear, selectedMonth, 1).getDay();
var offset = (day >= firstDayOfMonth) ? (day - firstDayOfMonth) : (day + 7 - firstDayOfMonth);
var secondThursday = new Date(selectedYear, selectedMonth, offset + 8);
if (date.getDate() === secondThursday.getDate() && day === 4) {
return false;
}
return true;
}
]
};
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_one_day_current_month', 30 );
In questo esempio, stiamo impostando dinamicamente una data minima per un secondo campo di selezione data, assicurando che sia almeno 21 giorni dopo la prima data selezionata.
/**
* Add 21 days to the first date selection to block these days from the second selection
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_block_days_date_selection( ) {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$( "#wpforms-1277-field_19" ).flatpickr({
dateFormat: "m/d/Y",
onClose: function( selectedDates, dateStr, instance ) {
if ( selectedDates.length > 0 ) {
var minSecondDate = new Date( selectedDates[0] );
// Adding 21 days to the selected 1st date
minSecondDate.setDate( minSecondDate.getDate() + 21 );
$( "#wpforms-1277-field_20" ).flatpickr({
minDate: minSecondDate,
dateFormat: "m/d/Y"
});
}
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_block_days_date_selection', 30 );
Tradurre Sottolabel Data e Ora
Per tradurre le sottolabel "Data" e "Ora" nel campo Data/Ora, puoi usare questo snippet di codice:
``/**
* Translate Date and Time sublabels in the Date/Time field
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options
*/
function custom_translate_date_time_sublabels( $properties, $field, $form_data ) {
// Check if the field is of type 'date-time'
if ( 'date-time' === $field['type'] ) {
// Change the sublabel for the date field
if ( isset( $properties['inputs']['date']['sublabel']['value'] ) ) {
$properties['inputs']['date']['sublabel']['value'] = __( 'Your Translated Date Label');
}
// Change the sublabel for the time field
if ( isset( $properties['inputs']['time']['sublabel']['value'] ) ) {
$properties['inputs']['time']['sublabel']['value'] = __( 'Your Translated Time Label');
}
}
return $properties;
}
add_filter( 'wpforms_field_properties', 'custom_translate_date_time_sublabels', 10, 3 );
Per usare questo snippet:
- Sostituisci 'La Tua Etichetta Data Tradotta' con la tua traduzione desiderata per "Data"
- Sostituisci 'La Tua Etichetta Ora Tradotta' con la tua traduzione desiderata per "Ora"
Ad esempio, per tradurre le etichette in spagnolo:
$properties['inputs']['date']['sublabel']['value'] = __( 'Fecha');
$properties['inputs']['time']['sublabel']['value'] = __( 'Tiempo');
Un ultimo promemoria, ricorda che se stai usando qualunque degli snippet di codice in questo documento, le opzioni del costruttore di moduli per la limitazione dovrebbero essere disattivate. Per saperne di più sulle opzioni integrate per la limitazione delle date, controlla questa documentazione.
E questo è tutto ciò che ti serve per personalizzare il Menu a tendina Data o il Selettore Data! Vuoi personalizzare il selettore data per consentire un intervallo di date o date multiple? Prova il nostro tutorial su Come Consentire Intervallo di Date o Date Multiple nel Selettore Data.