选择日期后,jquery datepicker会滚动到页面顶部

时间:2018-11-10 14:18:18

标签: jquery wordpress datepicker jquery-ui-datepicker

我知道这个问题已经有几年了,但是我找不到与我的问题相关的答案。

我在此WP页面的中间看到了一个预订小部件插件: http://mattarahkka.com/the-lodge/#

选择日期后,页面将滚动到顶部。日期选择器保持打开状态,并且日期保持选中状态。但是为什么页面跳到顶部?

小部件php代码:

// include custom jQuery
functieon csf_booking_widget_custom_jquery() {

    /*   REGISTER JS FOR PLUGIN */
     wp_register_script('datepicker',plugins_url().'/csf-booking-widget/js/datepicker_2.js');
    /*   REGISTER CSS FOR PLUGIN */
    wp_register_style('jquery-ui','http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css');
    wp_register_style('csf-happy-booking-widget',plugins_url().'/csf-booking-widget/css/happy-booking-widget.css');
    /*   CALL ALL JS FOR PLUGIN */
    wp_enqueue_script('jXquery');
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-datepicker');
    wp_enqueue_script('datepicker');
     /*   CALL ALL CSS FOR PLUGIN */
    wp_enqueue_style('jquery-ui');
    wp_enqueue_style('csf-happy-booking-widget');
}

function insert_booking_widget() 
    {
     $content = "<div class=\"bookingWidget\">";
     $content .= "<h2>Book Now</h2>";
     $content .= "<form method=\"get\" action=\"https://mattarahkka.happybooking.io/\">";
     $content .= "<table class=\"sideTable\"><tbody><tr>";
     $content .= "<span class=\"date-title\" style=\"padding: 0px\">Check-in</span>";
     $content .= "<input id=\"from\" name=\"from\" class=\"checkInsDate\" type=\"text\">";
     $content .= "</tr><tr>";
     $content .= "<span class=\"date-title\" style=\"padding: 0px\">Check-out</span>";
     $content .= "<input id=\"to\" name=\"to\" class=\"checkInsDate\" type=\"text\">";
     $content .= "</tr></tbody></table>";
     $content .= "<div class=\"buttonHolder\">";
     $content .= "<input class=\"btn\" value=\"Search available lodgings\" type=\"submit\">";
     $content .= "</div>";
     $content .= "<input type=\"hidden\" name=\"lang\" value=\"English\"/>";
     $content .= "</form></div>";

     return $content;
    }
add_shortcode('happy-booking-widget','insert_booking_widget');

add_action('wp_enqueue_scripts', 'csf_booking_widget_custom_jquery');

Js文件(datepicker_2):

jQuery(function(){ 
    var dates = jQuery("#from, #to").datepicker({
    showWeek: true,
    firstDay: 1,
    dateFormat: 'yy-mm-dd',
    dayNamesMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
    weekHeader: "W.",
    monthNames: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
    onSelect: function(selectedDate) {
        var option = this.id == "from" ? "minDate" : "maxDate",
        instance = jQuery(this).data("datepicker"),
        date = jQuery.datepicker.parseDate(
            instance.settings.dateFormat ||
            jQuery.datepicker._defaults.dateFormat,
            selectedDate, instance.settings );
        dates.not(this).datepicker("option", option, date);
        autoclose: true;
    }

    });
});

0 个答案:

没有答案