Question

我为wordpress创建了一个带有简码的简单插件。目的是轻松地将酒店预订小部件集成到客户站点。这将被重用。

我的问题是，按计划，在单击ID为to和from的表单输入时，我无法激活datepicker脚本。

这里是带有代码的测试页的链接： http://mattarahkka.com/happy-booking-widget-test-page_sdf%5dk/

先谢谢您 / C

WP插件主文件：csf-booking-widget.php

<?php
/*
Plugin Name:  CSF Booking widget
Plugin URI:   https://schulznet.se
Description:  Happy booking widget 
Version:      1.0
Author:       CSF
Author URI:   https://schulznet.se
License:      GPL2
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  wporg
Domain Path:  /languages
*/

// include scripts and stylesheets
function csf_booking_widget_custom_jquery() {

    /*   REGISTER JS FOR PLUGIN */
     wp_register_script('datepicker',plugins_url().'/csf-booking-widget/js/datepicker.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('jquery-core');
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('datepicker');
     /*   CALL ALL CSS FOR PLUGIN */
    wp_enqueue_style('jquery-ui');
    wp_enqueue_style('csf-happy-booking-widget');
}
// Create the HTML for the 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.js

(function($) {
    var dates = $("#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 = $(this).data("datepicker"),
        date = $.datepicker.parseDate(
            instance.settings.dateFormat ||
            $.datepicker._defaults.dateFormat,
            selectedDate, instance.settings );
        dates.not(this).datepicker("option", option, date);
    }
    });
});

样式表：happy-booking-widget.css

.bookingWidget input.btn {
    margin: 20px 0 0 0;
    background: #000;
    color: #fff;
    padding: 10px 0;
    text-align: center;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    border: 0;
    width: 100%;
    display: block;
    cursor: pointer;
    text-decoration: none;
}

.bookingWidget input.btn:hover {
    color:#fff;
}

.bookingWidget input.checkInsDate {
    width:100%;
    height:34px;
    background-repeat:no-repeat, repeat-x;
    background-position:94% 50%;
    border:1px solid #aeaeae;
    font-size:13px;
    color:#575757;
    padding:8px 16px;
    display: block;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-image: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QMtaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkUwMTlCQzNFNUFBMTFFNEE1Q0JCNEI3RkE0Qzk1ODMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkUwMTlCQzRFNUFBMTFFNEE1Q0JCNEI3RkE0Qzk1ODMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2RTAxOUJDMUU1QUExMUU0QTVDQkI0QjdGQTRDOTU4MyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2RTAxOUJDMkU1QUExMUU0QTVDQkI0QjdGQTRDOTU4MyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/uAA5BZG9iZQBkwAAAAAH/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAgICAgICAgICAgMDAwMDAwMDAwMBAQEBAQEBAgEBAgICAQICAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA//AABEIABYAIAMBEQACEQEDEQH/xABlAAABBQEAAAAAAAAAAAAAAAAEAwUICQsKAQEAAAAAAAAAAAAAAAAAAAAAEAAABgIBAwQCAwEAAAAAAAACAwQFBgcBCAkREhUAExYKIRQiFxgZEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDqI5tOR6Z8WWicn2jruuY1Z86+dQ+toqwzJwdUUVQPU1A8fpyB/TMZiR4e21qG1dTECZWgOU4H0CpJ6d3oM9+F8y81oK0IByWVRH0cj5I7Q2F3skO5tZy1pv46tHPX23GGmSda4I7HHSBvSOFbVOtjzxiINiN6PVNHhQZXB7cJhmARM+ZuY7D2XZXJLcsbb45yOVNeOhD/AKM1rEGjYEmtmuk6ixcijZ2GNR6aRuKRvr22MSFnLmDateU5zyU8CChDnGVQwBoJ8I3I9OOUzROObRWVXUWrGd4n8yrWTsMJXO6qKrnWFFs2VL+yJX45c8siF0E7fxQqFi81N2dMqTevX0EMftGeRxx8Ux4YaAp6/wB/ak+GNdQHmNJTr8jkX6BjsWlMJVmNoFHbk4JQwGZB17RYz+fQE3AVyEhtfk8Cvluk4zydCKYxMxJYTd5RZ8Ow171nMaaOlHWMcNBKgYKcxLBqhqEuSxphFl49s33Aa6cJ5BBWdxTAbZbpYFQdofceIPlXCbtNLTQ74hpGe9JpMSRYxQ3CUiAa35SjSCTJcACeIZefcLwWDp9YLyedDb+84Y3mvv8A0R2/86azgUFsprx8jjfkDGYpWaesKahqO7JATjBm4L6dws5/PoEvtKo2U/jPjTk/OkVToo1t7rnJwxyXmOyVssY9ndZCcGtyHVDH39mY3CWliGSWtfcoGFPgIhLVqcvoLIUn2LuNRK2xt5lRXD3qezfKtWYHG0LYm3N4vFiSrXdvaNq8OFjxpQ0WOexSd7kBD+Vk1sipit6TDYUvuF4NVNWDQFrncOjUU90EVG8QWqD1iI6vzyOODar3J4vUSa2ndfEtWi0ViypQ82OQzxR6YCGIwwltlw0bypMfFPtF5UJnUJQXefVwTMweN2cOrCti/wChJ9zdlJPiLRE5xWtdbGPDrGzv62G7qGNlYn5ZEighJGuYhL2FQEQRIlh4OucB/9k=);
    background-position: left center;
    text-indent: 18px;
}

.bookingWidget .date-title {
    display: inline-block;
    margin: 10px 0 5px 0;
    letter-spacing: 1px;
    font-size: 13px;
    text-transform: uppercase;
    color: #444444;
    font-weight: 700;
    text-align: left;
}

.bookingWidget {
    min-width: 200px;
    font: 700 100%/1.5 Arial, sans-serif;
    padding: 20px;
    border: 1px solid black;
    max-width: 300px;
}

.bookingWidget h2 {
    display: block;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: #333333 !important;
    margin: 0 0 7px 0;
    font-size: 18px;
    margin-bottom: 20px;
}

.date-title {
    display: block;
}

.ui-widget {
    border: 1px solid black;
    font-family: 'Arial', sans-serif;
    border-radius: 0;
}

.ui-widget-header {
    border: 0;
    background: white;
}

.ui-state-default {
    background: white !important;
}

.ui-datepicker-title, .ui-datepicker-week-col {
    font-weight: 500;
}

.ui-state-highlight {
    color: #999 !important;
    background: #efefef !important;
    border: 1px solid #d3d3d3 !important;
}

.ui-state-highlight {
    color: #999 !important;
    border: 1px solid #d3d3d3 !important;
}

.ui-state-default.ui-state-hover {
    border: 1px solid #999 !important;
    background: black !important;
    color: white !important;
}

.ui-datepicker-header .ui-state-hover {
    background: white !important;
    border-radius: 0 !important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    text-align: center;
}

.ui-state-default.ui-state-active {
    background: black !important;
    color: white !important;
}

Answer 1

您遇到错误-datepicker.js中的“ $不是函数”吗？ver = 4.9.8：2，所以请尝试用

包装代码

 $( document ).ready(function() {
    var dates = $("#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 = $(this).data("datepicker"),
        date = $.datepicker.parseDate(
            instance.settings.dateFormat ||
            $.datepicker._defaults.dateFormat,
            selectedDate, instance.settings );
        dates.not(this).datepicker("option", option, date);
    }
    });
 });

Answer 2

使用另一个日期选择器，有时当某个程序运行时由于存在一些错误而影响另一个程序时，就像安装了一个插件，站点停止运行一样

Answer 3

问题在于，在Wordpress环境中，您必须在脚本中更改jQuery的$，因为它会加载自己的Jquery版本。

https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

已解决。

WordPress的自定义插件datepicker脚本不起作用

3 个答案: