Möchten Sie das Date Picker-Feld so anpassen, dass ein Datumsbereich oder mehrere Daten in Ihrem Formular ausgewählt werden können? 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 in diesem Kalender nur ein einziges Datum ausgewählt werden.
In diesem Tutorial zeigen wir Ihnen, wie Sie PHP verwenden können, um einen Datumsbereich oder mehrere Datumsauswahlen für Ihre WPForms bereitzustellen.
Hinweis: Bei der Verwendung von Snippets für die Date Picker, ist es am besten deaktivieren Sie alle integrierten Funktionen WPForms bietet in der Form Builder für weitere Einschränkung der Daten. Für weitere Informationen lesen Sie bitte diese Dokumentation.
Erstellen des Formulars
Zuerst müssen Sie Ihr Formular erstellen und mindestens ein Datum/Uhrzeit-Formularfeld hinzufügen und das Feld auf Date Picker einstellen.
Wenn Sie Hilfe bei der Erstellung eines Formulars benötigen, lesen Sie bitte diese Dokumentation.
Zulassen eines Datumsbereichs oder mehrerer Daten
Sobald Sie das Formular erstellt haben, wählen Sie aus, ob Sie einen Datumsbereich oder mehrere Daten in Ihrem Formular auswählen möchten, und fügen Sie das Snippet zu Ihrer Website hinzu.
Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial.
Hinweis: Bitte beachten Sie, dass die Eingabemaske, wenn Sie diese Einträge bearbeiten, keine Datumsbereiche oder mehrere Daten unterstützt. Dieses Snippet ist nur für die Frontend-Benutzer Ihrer Formulare gedacht.
Datumsbereich
Dieses spezielle Snippet ermöglicht es allen Datumsauswahlen, eine Reihe von Daten 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 );
Im Eintrag für die Einreichung wird das Anfangs- und Enddatum vermerkt.
Mehrere Termine
Alternativ können Sie dieses Snippet verwenden, die für mehrere Termine für jedes Datum Picker auf Ihre Formulare mit WPForms erstellt ausgewählt werden können.
/**
* 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: Wenn Sie Integrationen von Drittanbietern verwenden, werden diese Datumsformate möglicherweise nicht von diesen Diensten akzeptiert. Stellen Sie sicher, dass Sie alle Anpassungen testen, bevor Sie sie in einem Live-Formular verwenden.
Und das war's! Sie sind jetzt in der Lage, einen Datumsbereich oder mehrere Daten in Ihren WPForms auszuwählen. Möchten Sie mehr Optionen für Ihr Datumsfeld erstellen? Probieren Sie den Artikel How to Create Additional Formats for the Date Field aus.
Referenz Aktion
FAQ
F: Wie kann ich ein einzelnes Formular oder eine einzelne Datumsauswahl innerhalb eines bestimmten Formulars anvisieren?
A: Um ein bestimmtes Formular für den Datumsbereich als Beispiel auszuwählen, würden Sie dieses 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 );
Die 1049 in window.wpforms_1049 ist die Formular-ID.
Wenn Sie mehrere Datumsauswahlfelder in einem bestimmten Formular haben, können Sie mit diesem Beispiel eine bestimmte Feld-ID anvisieren.
/**
* 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 zielen wir auf die Formular-ID 1049 ab, aber in diesem Beispiel zielen wir auch nur auf die Datumsauswahl mit der Feld-ID 11 ab.
Wenn Sie Hilfe bei der Suche nach Ihrer Formular- und Feld-ID benötigen, lesen Sie bitte diese Anleitung.
F: Kann das Formular den Datumsbereich verwenden und trotzdem die Daten begrenzen?
A: Auf jeden Fall! Sie können den Datumsbereich verwenden, keine vergangenen Daten zulassen und nur eine bestimmte Anzahl von Tagen im Voraus auswählen. Im folgenden Codeschnipsel zielen wir auf die Formular-ID 1049 und die Datumsauswahl des Formulars wird:
- Auswahl vergangener Daten nicht zulassen
- Verwenden Sie die Datumsbereich-Funktion
- Sie können nur bis zu 14 Tage ausgewählt werden.
/**
* 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 bei der Suche nach Ihrer Formular- und Feld-ID benötigen, lesen Sie bitte diese Anleitung.
F: Kann ich das Trennzeichen für den Datumsbereich ändern?
A: Auf jeden Fall! Um ein anderes Datumstrennzeichen für den Datumsbereich zu verwenden, verwenden Sie dieses Codeschnipsel 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' so zu ändern, wie Sie das Trennzeichen haben möchten. Standardmäßig wird ein Bindestrich (-) als Trennzeichen angezeigt.
F: Kann ich eine Mindestanzahl von Tagen vorgeben, die ausgewählt werden müssen?
A: Absolut, um den Bereich zu verwenden und eine Mindestanzahl von Tagen zu verlangen, verwenden Sie einfach dieses Codeschnipsel.
/**
* 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 mit CSS-Klassen anstelle von Fensterobjekten festlegen?
A: Ja, Sie können Datumsauswahlen mit CSS-Klassen anstelle von Fensterobjekten festlegen. Dieser Ansatz ermöglicht eine größere Flexibilität bei der Ausrichtung auf bestimmte Elemente ohne umfangreiche Anpassungen.
Hier ein Beispiel mit jQuery-Klassenselektoren:
/**
* 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 zielen wir auf Datumspicker mit der CSS-Klasse travel-form-date-range. Mit dieser Methode können Sie die Datumsbereichsfunktionalität auf bestimmte Datumsauswahlfelder auf der Grundlage ihrer Klasse anwenden, anstatt Formular- oder Feld-IDs zu verwenden.
Denken Sie daran, die travel-form-date-range mit der tatsächlichen CSS-Klasse, die Sie für Ihre Datumsauswahlfelder verwenden.