KI-Zusammenfassung
Möchten Sie das Feld Datumsauswahl anpassen, um die Auswahl eines Datumsbereichs oder mehrerer Daten in Ihrem Formular zu ermöglichen? Wenn Sie mehrere Buchungen in einem Formular zulassen, müssen Sie Ihren Besuchern möglicherweise die Möglichkeit geben, einen Datumsbereich oder mehrere Daten auszuwählen. Standardmäßig kann innerhalb dieses Kalenders nur ein einzelnes Datum ausgewählt werden.
In diesem Tutorial zeigen wir Ihnen, wie Sie mit PHP einen Datumsbereich oder mehrere Datumsangaben für Ihre WPForms bereitstellen.
Hinweis: Wenn Sie Snippets für die Datumsauswahl verwenden, ist es am besten, alle integrierten Funktionen, die WPForms im Formular-Builder zur weiteren Einschränkung von Daten bereitstellt, auszuschalten. Weitere Informationen finden Sie in dieser Dokumentation.
Erstellung des Formulars
Zuerst müssen Sie Ihr Formular erstellen und mindestens ein Feld vom Typ Datum/Uhrzeit hinzufügen und das Feld auf Datumsauswahl einstellen.
Wenn Sie Hilfe bei der Erstellung eines Formulars benötigen, lesen Sie bitte diese Dokumentation.
Datumsbereich oder mehrere Daten zulassen
Sobald Ihr Formular erstellt ist, wählen Sie aus, ob Sie einen Datumsbereich oder mehrere Daten in Ihrem Formular zulassen möchten, und fügen Sie diesen Snippet zu Ihrer Website hinzu.
Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, sehen Sie sich dieses Tutorial an.
Hinweis: Bitte beachten Sie, dass der Eingabebildschirm keine Datumsbereiche oder mehrere Daten unterstützt, wenn Sie diese Einträge bearbeiten. Dieser Snippet ist nur für die Frontend-Benutzer Ihrer Formulare bestimmt.
Datumsbereich
Dieser spezielle Snippet ermöglicht es allen Datumsauswahlen, einen Datumsbereich für alle Formulare auszuwählen.
/**
* 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 );
Innerhalb der Einreichung werden Start- und Enddatum angegeben.
Mehrere Daten
Alternativ können Sie diesen Snippet verwenden, der die Auswahl mehrerer Daten für jede Datumsauswahl in Ihren mit WPForms erstellten Formularen ermöglicht.
/**
* 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 );
Innerhalb des Eintrags werden alle ausgewählten Daten durch ein Komma getrennt.
Hinweis: Bei Verwendung von Drittanbieter-Integrationen werden diese Datumsformate möglicherweise nicht von diesen Diensten akzeptiert. Testen Sie alle Anpassungen, bevor Sie sie in einem Live-Formular verwenden.
Und das ist alles! Sie können jetzt einen Datumsbereich oder mehrere Daten in Ihren WPForms auswählen. Möchten Sie weitere Optionen für Ihr Datumsfeld erstellen? Probieren Sie den Artikel So erstellen Sie zusätzliche Formate für das Datumsfeld.
Referenzaktion
FAQ
F: Wie ziele ich auf ein einzelnes Formular oder eine einzelne Datumsauswahl innerhalb eines bestimmten Formulars?
A: Um beispielsweise ein bestimmtes Formular für den Datumsbereich anzusprechen, würden Sie diesen Snippet verwenden.
/**
* 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 );
Während die 1049 in window.wpforms_1049 die Formular-ID ist.
Wenn Sie mehrere Datumsauswahlen in einem bestimmten Formular haben, können Sie mit diesem Beispiel ein bestimmtes Feld-ID ansprechen.
/**
* 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 );
Genau wie im ersten Beispiel sprechen wir die Formular-ID 1049 an, aber mit diesem Beispiel sprechen wir nur die Datumsauswahl mit der Feld-ID 11 an.
Wenn Sie Hilfe beim Finden Ihrer Formular- und Feld-ID benötigen, sehen Sie sich dieses Tutorial an.
F: Kann das Formular den Datumsbereich verwenden und trotzdem die Daten einschränken?
A: Absolut! Sie können den Datumsbereich verwenden, keine vergangenen Daten zulassen und nur eine bestimmte Anzahl von Tagen im Voraus zulassen. Im folgenden Code-Snippet sprechen wir die Formular-ID 1049 an und die Datumsauswahl des Formulars wird:
- Keine vergangenen Daten zur Auswahl zulassen
- Die Datumsbereichsfunktion verwenden
- Nur bis zu 14 Tage zur Auswahl zulassen
/**
* 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 );
Wenn Sie Hilfe beim Finden Ihrer Formular- und Feld-ID benötigen, sehen Sie sich dieses Tutorial an.
F: Kann ich den Trennzeichen für den Datumsbereich ändern?
A: Absolut! Um ein anderes Datums-Trennzeichen für den Datumsbereich zu verwenden, verwenden Sie diesen Code-Snippet anstelle des obigen.
/**
* 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 );
Denken Sie daran, rangeSeparator: ‘sep-text-goes-here’ zu ändern, damit es mit dem gewünschten Trennzeichen übereinstimmt. Standardmäßig sehen Sie einen Bindestrich (-) als Trennzeichen.
F: Kann ich einen Mindestbereich von Tagen festlegen, die ausgewählt werden müssen?
A: Absolut, um den Bereich zu verwenden und eine Mindestanzahl von Tagen zu verlangen, verwenden Sie einfach diesen Code-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_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 );
F: Kann ich Datumsauswahlen anhand von CSS-Klassen anstelle von Fensterobjekten ansprechen?
A: Ja, Sie können Datumsauswahlen anhand von CSS-Klassen anstelle von Fensterobjekten ansprechen. Dieser Ansatz ermöglicht mehr Flexibilität beim Ansprechen bestimmter Elemente ohne umfangreiche Anpassungen.
Hier ist ein Beispiel mit jQuery-Klassen-Selektoren:
/**
* 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 diesem Beispiel sprechen wir Datumsauswahlen mit der CSS-Klasse travel-form-date-range an. Diese Methode ermöglicht es Ihnen, die Datumsbereichsfunktion auf bestimmte Datumsauswahlen basierend auf ihrer Klasse anzuwenden, anstatt Formular- oder Feld-IDs zu verwenden.
Denken Sie daran, travel-form-date-range durch die tatsächliche CSS-Klasse zu ersetzen, die Sie für Ihre Datumsauswahlfelder verwenden.
Kann ich mehrere Monate gleichzeitig im Kalender der Datumsauswahl anzeigen?
Ja! Sie können mehr als einen Monat gleichzeitig mit der Option showMonths der Flatpickr-Bibliothek anzeigen. Dies ist hilfreich, wenn Benutzer mehr Daten auf einen Blick sehen sollen, wenn sie einen Bereich auswählen.
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 );
Im obigen Beispiel zeigt der Kalender 2 Monate nebeneinander an, wenn Daten ausgewählt werden. Sie können showMonths auf jede beliebige Zahl ändern, je nachdem, wie viele Monate Sie anzeigen möchten.