jQuery datepicker w/script, чтобы отключить даты, работает в скрипке. не на сайте

Question

Вот код, у меня в голове моего сайта (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) отлично работает и отключает даты с 1 по 5 сентября 2013 года в datepicker - поэтому сам сценарий выглядит нормально.

Но когда я использую его на своем сайте (мой сайт находится в WordPress, а поле datepicker находится внутри формы ContactForm7 - если это имеет значение - оно все же позволяет мне установить идентификатор поля datepicker, чтобы он был штраф) ни одна из дат не отключена.

Поле datepicker называется «Дата тура» (в левом столбце, вторая строка снизу) - даже когда я просматриваю источник страницы, я вижу, что мой JS объявлен в голове, и если я прокручиваю вплоть до полей формы, я могу видеть, что идентификатор поля даты тура (datepicker) установлен в id = "dpick", который должен работать на основе второй функции в моем скрипте, правильно?

Может ли кто-нибудь помочь мне разобраться, почему это не работает? Я пытался понять это на века и не повезло. Я чувствую, что я на правильном пути, но, возможно, я что-то просто не хватает ...

Edit:

Не уверен, если это делает никакой разницы ... но во 2-й функции, где он говорит " dateFormat: 'dd MM yy' "- есть также возможность установить формат даты из моей формы CF7, но я попытался сопоставить их, и даже тогда он все еще не работает ...:/

Answer 1

Вы включили 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:

Answer 2

Стандартный способ сделать это, чтобы положить 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'); 
} 

, но ваш файл ваши-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 
     }); 
    }); 
});