Инициализация плагина JQuery UI Datepicker в WooCommerce

Question

Чтобы выбрать диапазон дат, я использую плагин Jquery UI Datepicker. Я использую код, который показывает количество дней при выборе периода.

Регистрация плагина DatePicker jQuery:

add_action('wp_enqueue_scripts', 'enabling_date_picker');

function enabling_date_picker() {

    // Only on front-end and product page
    if (is_product() && !is_wc_endpoint_url()):

    // Load the Datepicker jQuery-ui plugin script
    wp_enqueue_style('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css');
    wp_enqueue_script('jquery-ui-datepicker');

    endif;
}

Инициализация плагина:

// The jQuery script
add_action('wp_footer', 'rental_date_jquery_script');

function rental_date_jquery_script() {
    // Only on front-end and product page
    if (is_product() && !is_wc_endpoint_url()):

            ?>

            <script>
            var from = new Date();
    var to = new Date();
    var dayDiff = 1;

    $(function() {
            var dates = $("#from, #to").datepicker({
                    defaultDate: "+1w",
                    changeMonth: true,
                    numberOfMonths: 1,
                    dateFormat: "dd.mm.yy",
                    minDate: 0,
                    maxDate: 14,
                    onSelect: function(selectedDate) {
                            var option = this.id == "from" ? "minDate" : "maxDate",
                                    instance = $(this).data("datepicker"),
                                    date = $.datepicker.parseDate(
                                            instance.settings.dateFormat ||
                                            $.datepicker._defaults.dateFormat,
                                            selectedDate, instance.settings);
                            dates.not(this).datepicker("option", option, date);

                            if (this.id == "from") {
                                    from = $(this).datepicker('getDate');
                                    if (!(to == "")) {
                                            update_days()
                                    }
                            }
                            if (this.id == "to") {
                                    to = $(this).datepicker('getDate');
                                    update_days()
                            }
                    }
            });
    });       

    function update_days() {
            dayDiff = Math.ceil((to - from) / (1000 * 60 * 60 * 24));
            $("#days").empty()
            $("#days").append(dayDiff)
    } 
</script> 

<?php

    endif;
}

Но по какой-то причине Datepicker не работает, а форма календаря неактивна.

// Add a custom field before single add to cart
add_action('woocommerce_before_variations_form', 'display_rental_date_custom_fields', 5);

function display_rental_date_custom_fields() {

    echo '<div>
            <h3>From:</h3>
            <input id="from" type="text" name="from" readonly />
        </div>
        <div>
            <h3>To:</h3>
            <input id="to" type="text" name="to" readonly />
        </div>
        <div>
            <span>You have chosen: </span>
            <span id="days">< /span> days.
        </div>';
}

Как исправить мой код, чтобы Datepicker работал правильно?

Answer 1

Потому что вы использовали функцию вне jquery. Пожалуйста, попробуйте это

            <script>
   jQuery(function($) {
        var from = new Date();
        var to = new Date();
        var dayDiff = 1;
         var dates = $("#from, #to").datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 1,
                dateFormat: "dd.mm.yy",
                minDate: 0,
                maxDate: 14,
                onSelect: function(selectedDate) {
                        var option = this.id == "from" ? "minDate" : "maxDate",
                                instance = $(this).data("datepicker"),
                                date = $.datepicker.parseDate(
                                        instance.settings.dateFormat ||
                                        $.datepicker._defaults.dateFormat,
                                        selectedDate, instance.settings);
                        dates.not(this).datepicker("option", option, date);

                        if (this.id == "from") {
                                from = $(this).datepicker('getDate');
                                if (!(to == "")) {
                                        update_days()
                                }
                        }
                        if (this.id == "to") {
                                to = $(this).datepicker('getDate');
                                update_days()
                        }
                }
        });
        function update_days() {
                dayDiff = Math.ceil((to - from) / (1000 * 60 * 60 * 24));
                $("#days").empty()
                $("#days").append(dayDiff)
        } 
    });       

</script>