KI-Zusammenfassung
Möchten Sie die Datumsoptionen für Datums-/Uhrzeitfelder in WPForms anpassen? Das Feld Datum/Uhrzeit bietet zwei Formatierungsoptionen für die Datumsauswahl: Datums-Auswahl, die dem Benutzer einen Kalender anzeigt, oder Datums-Dropdown.
Mit der Veröffentlichung der Version 1.6.3 bietet WPForms Optionen im Formular-Generator, um Tage zu begrenzen und sogar vergangene Tage zu deaktivieren sowie Stunden zu begrenzen. Wenn dies alles ist, was Sie tun müssen, lesen Sie bitte diese Dokumentation.
Dieses Tutorial konzentriert sich mehr auf die Anpassung des Feldes Datums-Dropdown und die Berechnung von Datumsblöcken für die Datums-Auswahl.
Es ist wichtig zu bedenken, dass, wenn Sie irgendeinen der Code-Schnipsel in diesem Dokument verwenden, die Optionen des Formular-Generators zum Begrenzen ausgeschaltet sein sollten. Um mehr über die integrierten Optionen zur Begrenzung von Daten zu erfahren, lesen Sie bitte diese Dokumentation.
Erstellung des Formulars
Bevor wir Schnipsel hinzufügen, müssen Sie Ihr Formular erstellen und Ihre Felder hinzufügen. Da dieses Tutorial auf dem Feld Datums-Dropdown basiert, müssen Sie mindestens ein Datumsfeld hinzufügen.
Wenn Sie Hilfe bei der Erstellung Ihres Formulars benötigen, sehen Sie sich bitte dieses Tutorial an.
Nachdem Sie Ihre Datumsfelder hinzugefügt haben, stellen Sie sicher, dass Sie den Typ auf Datums-Dropdown eingestellt haben. Sie können den Datumstyp festlegen, indem Sie auf die Erweiterten Optionen des Formularfeldes klicken.
Anpassen des Datumsfeldes
Um das Datumsfeld anzupassen, müssen Sie einen der unten stehenden Code-Schnipsel zu Ihrer Website hinzufügen.
Wenn Sie Hilfe beim Hinzufügen von Code-Schnipseln zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial.
Einige der unten stehenden Code-Schnipsel erfordern die Verwendung spezifischer Informationen zu Formular-ID und Feld-ID.
Verwendung von Schnipseln im Datums-Dropdown
Begrenzung der Anzahl der Tage im Dropdown, um dem Monat zu entsprechen
Damit das Feld Tage mit der Anzahl der für diesen Monat verfügbaren Tage übereinstimmt, würden Sie diesen Schnipsel verwenden.
/**
* 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 );
Begrenzung von Monaten, Tagen und Jahren im Datums-Dropdown
Die unten stehenden Schnipsel aktualisieren die Dropdown-Felder, um nur 5-12 (Mai-Dezember) für die verfügbaren Monate, 20-31 für die verfügbaren Tage und 2020-2021 für die verfügbaren Jahre anzuzeigen. Sie können die Felder nach Bedarf ändern.
Es gibt zwei verschiedene Möglichkeiten, dies anzuwenden:
- Alle Datums-Dropdown-Felder innerhalb eines bestimmten Formulars
- Ein bestimmtes Datums-Dropdown innerhalb eines bestimmten Formulars.
Alle Datums-Dropdown-Felder innerhalb eines bestimmten Formulars
Der unten stehende Schnipsel gilt nur für Formular-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 );
Gezielte Auswahl eines bestimmten Datums-Dropdowns innerhalb eines bestimmten Formulars
Unten gilt für das Datums-Dropdown mit Feld-ID 3 innerhalb von Formular-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 );
Starten des Datums-Dropdowns ab 'heute'
In Ihrem Datums-Dropdown können Sie mit diesem Snippet Monat, Tag und Jahr automatisch auf den heutigen Monat, Tag und das heutige Jahr voreinstellen lassen.
/**
* 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 );
Verwendung von Snippets im Datumsfeld
Vergangene Daten deaktivieren und nur die nächsten 31 Tage anzeigen
In diesem Snippet deaktivieren wir jedes vergangene Datum und erlauben nur die Auswahl bis zu 31 Tage ab dem aktuellen Datum für die Formular-ID 1137 und die Feld-ID 14. Denken Sie daran, diese IDs zu ändern, damit sie zu Ihrer eigenen Formular- und Feld-ID passen. Wenn Sie nicht sicher sind, wo Sie diese IDs finden, lesen Sie bitte dieses 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 );
Daten von gestern, heute und morgen anzeigen
Mit new Date().fp_incr(-1) können Sie einfach steuern, wie viele Tage minDate und maxDate angezeigt werden, indem Sie einfach die Zahl erhöhen. Die Verwendung des Minuszeichens (-) vor der Zahl bedeutet, dass es sich um vergangene Tage handelt.
Da unser Formular erst ab gestern beginnen soll, beginnen wir mit dem minDate, das nur die (-1) erlaubt, und enden mit dem (1) (damit es heute und morgen einschließt) für das 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 );
Daten ab dem nächsten Tag und darüber hinaus für das Datumsfeld anzeigen
Sie können dieses Code-Snippet einfach verwenden, das alle vergangenen Tage (einschließlich heute) ausschließt.
Ändern Sie einfach +1), zu der Anzahl von Tagen, bis zu der Sie die Auswahl einschränken möchten.
/**
* 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 );
Bestimmte Datumsbereiche für das Datumsfeld blockieren
Um bestimmte Datumsbereiche im Datumsfeld zu blockieren, verwenden Sie dieses 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 );
Nur bestimmte Tage des Monats zulassen
Wenn Sie möchten, dass Benutzer nur bestimmte Tage des Monats im Datumsfeld auswählen können, können Sie das folgende Snippet verwenden. In diesem Beispiel sind nur der 5. und der 20. jedes Monats auswählbar und alle anderen Daten sind deaktiviert.
Um zu ändern, welche Tage erlaubt sind, ersetzen Sie die Tageszahlen in Zeile 23 (die Bedingung, die den Tageswert prüft) durch die Tage, die Sie verwenden möchten.
Sie können die Zahlen 5 und 20 in Zeile 16 durch beliebige andere Datumzahlen ersetzen, um Ihren eigenen Anforderungen zu entsprechen.
Begrenzen Sie, wie weit im Voraus Benutzer Daten im Datumsfeld auswählen können
Wenn Sie das zukünftige Datum, das Benutzer im Datumsfeld auswählen können, begrenzen möchten, verwenden Sie dieses Code-Snippet.
/**
* 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 );
Alle vergangenen Tage und Montage im Datumsfeld ausschließen
Um alle vergangenen Tage und zukünftigen Montage einzuschränken, verwenden Sie dieses 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 );
Nachricht anzeigen, wenn das aktuelle Datum ausgewählt wird
In diesem Beispiel zeigen wir eine Pop-up-Nachricht an, wenn das aktuelle Datum ausgewählt wird.
/**
* 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 );
Einen bestimmten Wochentag deaktivieren
In diesem Beispiel möchten wir Sonntage mit diesem Snippet vollständig aus unserem Datumsfeld deaktivieren.
/**
* 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 );
Im Snippet deaktiviert return (date.getDay() === 0); nur Sonntage. Jeder Tag wird durch eine bestimmte Zahl dargestellt.
- 1 = Montag
- 2 = Dienstag
- 3 = Mittwoch
- 4 = Donnerstag
- 5 = Freitag
- 6 = Samstag
- 7 = Sonntag
Finden Sie einfach die numerische Darstellung für Ihren spezifischen Tag und aktualisieren Sie den Snippet, um Ihren gewünschten Tag widerzuspiegeln.
Das window.wpforms_420_1 repräsentiert die Formular-ID (420) und die Feld-ID für unseren Datums-Picker (_1). Sie müssen diese beiden IDs aktualisieren, um Ihre eigene Formular- und Feld-ID anzupassen.
Für Hilfe beim Finden Ihrer Formular- und Feld-ID-Nummern, sehen Sie sich bitte dieses Tutorial an.
Kalender-Starttag ändern
Um den Tag des Datums-Pickers zu ändern, an dem die Woche beginnt, verwenden Sie diesen Snippet. Beachten Sie, dass Montag die Zahl Eins darstellt und die Wochentage in numerischer Reihenfolge fortgesetzt werden.
/**
* 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 );
Zukünftige Daten deaktivieren
Die Verwendung dieses Snippets setzt das maxDate auf das heutige Datum (aktuell), sodass Benutzer keine zukünftigen Daten auswählen können.
/**
* 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 );
Bestimmte Formular-ID und Feld-ID im Datums-Picker ansprechen
Wenn Sie den Datums-Picker verwenden, können Sie ein einzelnes Formular oder ein bestimmtes Datumsfeld innerhalb eines bestimmten Formulars ansprechen.
In den folgenden Beispiel-Snippets sehen Sie window.wpforms_21_1. Wobei die _21 die Formular-ID und die _1 die Feld-ID darstellt.
Wenn Sie Hilfe beim Finden Ihrer Formular- und Feld-ID-Nummern benötigen, sehen Sie sich bitte dieses Tutorial an.
Hier sind ein paar Code-Snippets. Das erste erlaubt die Auswahl nur der letzten 30 Tage:
/**
* 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 );
Das nächste Code-Snippet erlaubt die Auswahl der letzten 30 Tage und "heute":
/**
* 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 );
Auf einen einzigen Tag im aktuellen Monat beschränken
In diesem Beispiel akzeptieren wir nur Termine für einen einzigen Tag im aktuellen Monat.
/**
* 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 diesem Beispiel setzen wir dynamisch ein Mindestdatum für ein zweites Datumsfeld, um sicherzustellen, dass es mindestens 21 Tage nach dem ersten ausgewählten Datum liegt.
/**
* 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 );
Datums- und Zeit-Unterbeschriftungen übersetzen
Um die Unterbeschriftungen "Datum" und "Uhrzeit" im Datums-/Uhrzeitfeld zu übersetzen, können Sie diesen Code-Snippet verwenden:
``/**
* 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 );
Um diesen Snippet zu verwenden:
- Ersetzen Sie 'Ihre übersetzte Datumsbeschriftung' durch Ihre gewünschte Übersetzung für "Datum"
- Ersetzen Sie 'Ihre übersetzte Uhrzeitbeschriftung' durch Ihre gewünschte Übersetzung für "Uhrzeit"
Zum Beispiel, um die Beschriftungen ins Spanische zu übersetzen:
$properties['inputs']['date']['sublabel']['value'] = __( 'Fecha');
$properties['inputs']['time']['sublabel']['value'] = __( 'Tiempo');
Eine letzte Erinnerung: Bitte denken Sie daran, dass, wenn Sie irgendeinen der Code-Snippets in diesem Dokument verwenden, die Optionen des Formular-Builders zum Einschränken ausgeschaltet sein sollten. Um mehr über die integrierten Optionen zur Datumsbeschränkung zu erfahren, lesen Sie bitte diese Dokumentation.
Und das ist alles, was Sie brauchen, um den Datums-Dropdown oder Datums-Picker anzupassen! Möchten Sie den Datums-Picker so anpassen, dass er einen Datumsbereich oder mehrere Daten zulässt? Probieren Sie unser Tutorial unter Datumsbereich oder mehrere Daten im Datums-Picker zulassen.