在 WooCommerce 中初始化 jQuery UI 日期选择器插件

Question

要选择日期范围，我使用了Jquery UI 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;
}

但由于某种原因，日期选取器不起作用，日历窗体处于非活动状态。

// 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>';
}

如何修复我的代码以使日期选择器正常工作？

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>