jQuery datepicker w/ script 禁用日期，在小提琴中工作。不在现场

Question

这是我在网站 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”（在左列，从底部算起的第 2 行）——即使我查看页面的源代码，我也可以看到我的 JS 在头部声明，如果我向下滚动到表单字段所在的位置，我可以看到我的游览日期（datepicker）字段 ID 设置为 id="dpick"，这应该基于我的脚本中的第二个函数，对吧？

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

编辑：

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

Answer 1

执行此操作的标准方法是将您的 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
        });
    });
});   

Answer 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 控制台中看到错误：