0

这是我在网站的 HEAD 中获得的代码（header.php）：

<script type="text/javascript">
var unavailableDates = ["1-9-2013", "2-9-2013", "3-9-2013", "4-9-2013", "5-9-2013"];

function unavailable(date) {
        dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
        if ($.inArray(dmy, unavailableDates) == -1) {
            return [true, ""];
        } else {
            return [false, "", "Unavailable"];
    }
}

    $(function() {
        $("#dpick").datepicker({
            dateFormat: 'dd MM yy',
            beforeShowDay: unavailable
    });

});

当我将它加载到小提琴中并使用第二个函数（#dpick）中引用的特定 ID 调用一个简单的输入时，它可以正常工作并在 datepicker 中禁用 2013 年 9 月 1 日至 5 日的日期 - 所以脚本本身似乎没问题。

但是当我在我的网站上使用它时（我的网站在 WordPress 中，并且 datepicker 字段在 ContactForm7 表单内 - 如果这有任何区别 - 它仍然允许我设置 datepicker 字段的 ID，所以它应该没问题）没有日期被禁用。

datepicker 字段称为“Tour Date”（在左列，从底部算起的第二行）——即使我查看页面的源代码，我也可以看到我的 JS 在头部声明，如果我向下滚动到表单字段是，我可以看到我的游览日期（datepicker）字段 ID 设置为 id="dpick" 这应该基于我脚本中的第二个函数，对吗？

谁能帮我弄清楚为什么这不起作用？我多年来一直试图弄清楚这一点，但没有任何运气。我觉得我在正确的轨道上，但也许我错过了一些简单的东西......

编辑：

不确定这是否有任何区别......但在第二个函数中显示“dateFormat：'dd MM yy'” - 还有一个选项可以从我的CF7表单中设置日期格式，但我已经尝试匹配它们起来，即使那样它似乎仍然无法正常工作......：/

4

2 回答 2

2

您在使用 jQuery 的脚本之后包含 jQuery。代码：

<script type="text/javascript">
    var unavailableDates = ["1-9-2013", "2-9-2013", "3-9-2013", "4-9-2013", "5-9-2013"];

    function unavailable(date) {
            dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();

    // snip... more code...

    // you're using jQuery! but it's not loaded yet!
    $(function() {
        $("#dpick").datepicker({
            dateFormat: 'mm dd yy',
            beforeShowDay: unavailable
    });
</script>

<!-- more HTML stuff... -->

<script type='text/javascript' src='http://experience.nipissingu.ca/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://experience.nipissingu.ca/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://experience.nipissingu.ca/wp-content/plugins/gallery-plugin-pro/fancybox/jquery.mousewheel-3.0.4.pack.js?ver=3.6'></script>
<script type='text/javascript' src='http://experience.nipissingu.ca/wp-content/plugins/gallery-plugin-pro/fancybox/jquery.fancybox-1.3.4.pack.js?ver=3.6'></script>
<!-- etc. more jQuery including -->

只需在 jQuery 包含后移动您的脚本标签，它就会起作用。

您可以在 JavaScript 控制台中看到错误：

图片

于 2013-08-20T19:49:50.650 回答
0

执行此操作的标准方法是将您的 JavaScript 放在一个文件中：/wp-content/themes/your-theme/js/your-script.js并将其加入队列以functions.php添加 jQuery 作为依赖项。这样，其他插件可以与您的脚本交互，例如：缓存插件。

add_action( 'wp_enqueue_scripts', 'enqueue_so_18343752' );

function enqueue_so_18343752() 
{
    wp_register_script( 
        'my-datepicker', 
        get_stylesheet_directory_uri() .'/js/your-script.js', 
        array( 'jquery' ) // Dependencies
    );
    wp_enqueue_script( 'my-datepicker' );
}

我用这个测试过：

jQuery(document).ready(function($) 
{   
    alert('enqueued successfully');
}

但是您的文件your-scripts.js应该如下所示：

jQuery(document).ready(function($) 
{   
    var unavailableDates = ["1-9-2013", "2-9-2013", "3-9-2013", "4-9-2013", "5-9-2013"];

    function unavailable(date) {
        dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
        if ($.inArray(dmy, unavailableDates) == -1) {
            return [true, ""];
        } else {
            return [false, "", "Unavailable"];
        }
    }

    $(function() {
        $("#dpick").datepicker({
            dateFormat: 'dd MM yy',
            beforeShowDay: unavailable
        });
    });
});
于 2013-08-20T21:18:58.200 回答