So legen Sie ein Standarddatum für Ihr Datumsfeld-Formularfeld fest

Möchten Sie, dass Ihr Datumsauswahlfeld mit einem Standarddatum geladen wird? Wenn Sie das Format Datumsauswahl im Formularfeld Datum/Uhrzeit verwenden, können Sie einfach ein Datum aus einem Popup-Fenster auswählen. Aber wussten Sie, dass Sie für dieses Feld auch ganz einfach ein Standarddatum festlegen können, das mit dem heutigen Datum beginnt? In diesem Tutorial zeigen wir Ihnen, wie Sie das erreichen.

Erstellung des Formulars

Zuerst müssen Sie Ihr Formular erstellen und das Formularfeld Datum/Uhrzeit zu Ihrem Formular hinzufügen. Stellen Sie auf der Registerkarte Erweitert sicher, dass Sie Datumsauswahl für den Typ ausgewählt haben.

Wenn Sie Hilfe bei der Erstellung Ihres Formulars benötigen, lesen Sie bitte dieses Tutorial.

Festlegen des Standarddatums

Bei jedem der Snippets müssen Sie sie kopieren und auf Ihre Website einfügen. Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial.

Hinzufügen des Code-Snippets für alle Datumsauswahlen

/**
 * Set today's date as default date for all date pickers.
 *
 * @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
 */

function wpf_dev_date_picker_default() {
    ?>

    <script type="text/javascript">

        window.wpforms_datepicker = {

            defaultDate: "today",
            disableMobile: "true"

        }

    </script>

    <?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );

Hinzufügen des Code-Snippets für Datumsauswahlen in einem bestimmten Formular

Um ein Standarddatum für die Datumsauswahlen in einem bestimmten Formular festzulegen, können Sie dieses Snippet verwenden, aber ändern Sie _1287, um Ihre eigene Formular-ID anzugeben. Wenn Sie Hilfe beim Auffinden Ihrer Formular-ID benötigen, sehen Sie sich dieses Tutorial an.

/**
 * Set today's date as default date for all date pickers inside the specific form.
 *
 * @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
 */

function wpf_dev_date_picker_default() {
    ?>

    <script type="text/javascript">

        // Run this on all date pickers inside the form ID 1287
        window.wpforms_1287 = window.wpforms_1287 || {};
        window.wpforms_1287.datepicker = {

            defaultDate: "today",
            disableMobile: "true"

        }

    </script>

    <?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );

Hinzufügen des Code-Snippets für ein bestimmtes Datumsauswahlfeld in einem bestimmten Formular

Um ein Standarddatum für ein bestimmtes Feld in einem bestimmten Formular festzulegen, können Sie dieses Snippet verwenden, aber ändern Sie _1287, um Ihre eigene Formular-ID anzugeben, und aktualisieren Sie _4, um die Feld-ID anzugeben. Wenn Sie Hilfe beim Auffinden Ihrer Formular-ID benötigen, sehen Sie sich dieses Tutorial an.

/**
 * Set today's date as default date for a specific date picker inside a specific form.
 *
 * @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
 */

function wpf_dev_date_picker_default() {
    ?>

    <script type="text/javascript">

        // Run this on the date field ID 4 inside the form ID 1287
        window.wpforms_1287_4 = window.wpforms_1287_4 || {};
        window.wpforms_1287_4.datepicker = {

            defaultDate: "today",
            disableMobile: "true"

        }

    </script>

    <?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );

Und das ist alles, was Sie brauchen, um ein Standarddatum festzulegen. Wenn die Seite geladen wird, wird im Feld Datum automatisch das aktuelle Datum geladen.

Möchten Sie auch lernen, wie Sie einen Datumsbereich oder mehrere Daten festlegen, die aus Ihrer Datumsauswahl ausgewählt werden können? Lesen Sie unseren Artikel über So erlauben Sie Datumsbereiche oder mehrere Daten in der Datumsauswahl.

Referenzaktion

wpforms_wp_footer_end

FAQ

Kann ich ein Standarddatum einfach über einen benutzerdefinierten CSS-Klassennamen festlegen?

A: Absolut! Stellen Sie zuerst sicher, dass Sie Ihrem Formularfeld Datum/Uhrzeit auf der Registerkarte Erweitert einen Klassennamen hinzugefügt haben.

In unserem Beispiel lautet der von uns verwendete CSS-Klassenname customdatecode.

Sobald Sie den CSS-Klassennamen des Formulars gespeichert haben, fügen Sie diesen Code-Snippet zu Ihrer Website hinzu.

/**
 * Set today's date as default date for all date pickers from a CSS class name.
 *
 * @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
 */

function wpf_dev_date_picker_default() {
    ?>

    <script type="text/javascript">

        jQuery( '.customdatecode' ).each( function () {

            var form   = jQuery( this ).closest( '.wpforms-form' ),
                formID  = form.data( 'formid' ),
                fieldID = jQuery(this).data('field-id' );
            window['wpforms_' + formID + '_' + fieldID] = {

                datepicker:  {
                    defaultDate: 'today',
                    disableMobile: 'true'
                }

            }

        } );
    </script>

    <?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );

Nun wird in jedem Formular, das eine Datumsauswahl mit diesem CSS-Klassennamen enthält, automatisch das heutige Datum als Datum für dieses Feld festgelegt.

F: Funktioniert das auch auf Mobilgeräten?

A: Mobile Geräte variieren alle mit der Standardfunktionalität des Betriebssystems, sodass das Datum bei der Anzeige von mobilen Geräten nicht automatisch ausgefüllt wird.

F: Wie kann ich das Mindestdatum und das Standarddatum für das aktuelle Datum festlegen?

A: Absolut! Um das Standarddatum und das Mindestdatum Ihres Datumsauswahlfelds auf das heutige Datum zu setzen, verwenden Sie einfach diesen Ausschnitt.

/**
 * Set today's date as the default and minimum date for all date pickers.
 *
 * @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
 */

function wpf_dev_date_picker_default() {
    ?>

    <script type="text/javascript">

        window.wpforms_datepicker = {

            defaultDate: "today",
            minDate: "today",
            disableMobile: "true"
        }

    </script>

    <?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );