Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1486323

    Hallo folgendes Problem.
    Ich will auf meiner Reservierungsseite einfach das Datum einschränken in der Form tt.mm.jjjj
    Z.B. nur von 08.08.2025 – 18.05.2025

    Was hab ich alles getan.
    1. Supportseiten durchforstet
    2. Child Theme angelegt
    3. In functions.php folgendes eingetragen:

    /* Datum Platzhalter auf tt.mm.jjjj Format gesetzt */
    add_filter(‘avf_datepicker_date_placeholder’, ‘new_date_placeholder’);
    function new_date_placeholder() {
    $placeholder = “TT.MM.JJJJ”;
    return $placeholder;
    }

    /* Datum Platzhalter auf tt.mm.jjjj Format gesetzt */
    add_filter(‘avf_datepicker_dateformat’, ‘avf_change_datepicker_format’);
    function avf_change_datepicker_format($date_format) {
    $date_format = ‘dd.mm.yy’;
    return $date_format;
    }

    => Format auf tt.mm.jjjj gesetzt, sowohl Platzhalter als auch bei der Übernahme.

    4. Verschiedene Versuche das Datum via jQuery.datepicker zu ändern.
    (DANK an Guenni007)
    z.B. durch

    function my_datepicker_defaults() {
    ?>
    <script type=”text/javascript”>
    jQuery(document).ready(function(){
    jQuery.datepicker.setDefaults({
    minDate: 0,
    maxDate: ‘1m’ )
    });
    });
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘my_datepicker_defaults’, 20);

    Hier sollte von heute auf 1 Monat eingeschränkt werden.
    Leider keine Reaktion. Nicht durch private Mode, anderen Browser und Browserdaten löschen.

    Liebe Leute, alle Versuche via den Supportseiten eine funktionierende Lösung zu finden sind gescheitert.

    Jetzt bitte erneut:

    Wie schränke ich im Reservierungsformular am Datumsfeld den auszuwählenden Zeitraum ein?
    Also nur Bereich zwischen 08.08.2025 – 18.08.20205 wählbar.

    Vielen Dank.

    #1486331

    Hey shop802,
    Try adding this code instead to the end of your child theme functions.php file in Appearance ▸ Editor:

    function my_datepicker_limits() {
        ?>
        <script type="text/javascript">
        jQuery(document).ready(function($){
    
            // Use a short delay to wait for Enfold to initialize the datepicker
            setTimeout(function() {
                var $dateField = $('.avia_datepicker'); // Adjust this if needed
    
                if ($dateField.length && $dateField.data('datepicker')) {
                    $dateField.datepicker('option', {
                        minDate: new Date(2025, 7, 8),  // August 8, 2025
                        maxDate: new Date(2025, 7, 18)  // August 18, 2025
                    });
                } else {
                    console.warn("Datepicker not initialized or selector not found.");
                }
            }, 500); // delay to allow Enfold scripts to finish
    
        });
        </script>
        <?php
    }
    add_action('wp_footer', 'my_datepicker_limits', 30);
    

    Screen Shot 2025 07 04 at 5.35.07 PM

    Best regards,
    Mike

    #1486332

    Great, now it works as it should.
    Great support, thanks Mike, you are the best.

    Best regards
    Claudio

    #1486333

    By the way, if you have two date pickers, one for the start date and one for the end date, you can restrict the second date picker so that it only allows dates that are later. For example, we can also remove weekends from the selection.

    here in my example the minDate/maxDate are relative Values by +7 Days and +12 Month:

    
    function my_datepicker_limits() {
    ?>
    <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", function () { 
    (function($) { 
        setTimeout(function() {
            var $allDatepickers = $('.avia_datepicker');
    
            // Let's assume that the first avia_datepicker found is the start date
            var $startDateField = $allDatepickers.eq(0);
            // and the second avia_datepicker found the end date
            var $endDateField = $allDatepickers.eq(1);
    
            // Check whether we have found at least two datepicker fields
            if ($startDateField.length === 0 || $endDateField.length === 0) {
                console.warn('Could not find both Start and End datepicker fields. Ensure they are the first two .avia_datepicker elements.');
                return; // Exit script if not enough fields are found
            }
    
            // Find the container of the end date field (the <p> element in your structure)
            // This is the parent tag of the input field that also contains the label.
            var $endDateFieldContainer = $endDateField.parent('p.form_element');
    
            // Fallback if the container is not the <p> tag or is not found
            if (!$endDateFieldContainer.length) {
                $endDateFieldContainer = $endDateField; // Then we only hide the input field itself
            }
    
            function updateEndDatepickerState() {
                var selectedStartDate = $startDateField.datepicker('getDate');
                
    
                if (selectedStartDate) {
                    // Optional: Add one day to ensure that the end date is at least one day after the start date.
                    // then remove the backslashes of the next line
                    // selectedStartDate.setDate(selectedStartDate.getDate() + 1);
                  
                    // If a start date is selected, display the end date field
                    $endDateFieldContainer.css('display', 'block'); // Verwendet 'block', da <p> ein Block-Element ist
    
                    $endDateField.datepicker('option', 'minDate', selectedStartDate);
    
                    // Optional: Make sure that the end date is not before the start date.
                    var currentEndDate = $endDateField.datepicker('getDate');
                    if (currentEndDate && currentEndDate < selectedStartDate) {
                        $endDateField.datepicker('setDate', selectedStartDate);
                    }
    
                } else {
                    // If no start date is selected, hide the end date field
                    $endDateFieldContainer.css('display', 'none');
    
                    // Reset minDate of the end date date picker (e.g. to “today”)
                    $endDateField.datepicker('option', 'minDate', 0);
                }
            }
    
            if ($startDateField.data('datepicker')) {
                $startDateField.datepicker('option', {
                    beforeShowDay: $.datepicker.noWeekends,
                    minDate: "+7d", 
                    maxDate: "+12m",
                    onSelect: function(dateText, inst) {
                        // Update the state when a date is selected
                        updateEndDatepickerState();
                    },
                    onClose: function(dateText, inst) {
                        // Update the state even when closing the data picker (for robustness)
                        updateEndDatepickerState();
                    }
                });
            }
    
            if ($endDateField.data('datepicker')) {
                $endDateField.datepicker('option', {
                    // beforeShowDay: $.datepicker.noWeekends,
                    minDate: 0,
                    maxDate: "+12m"
                });
            }
    
            // Execute the function once when loading the page to set the initial state
            updateEndDatepickerState();
    
        }, 500);
    }(jQuery));
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'my_datepicker_limits', 20);
    

    see: https://webers-testseite.de/datepicker/

    #1486336

    Hi,
    Thanks for sharing Guenni007, perhaps someone will find this helpful.

    @shop802
    glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Reservierungsseite – Datumsfeld den auszuwählenden Zeitraum einschränken’ is closed to new replies.