Bootstrap datetimepicker не работает, нет ошибок консоли - конфликтный скрипт?

Question

http://www.pierceresults.com/pierce-results-seminars/PRS-Level-1-October-2015-Marietta-GA

Использование OpenCart и добавление поля времени для регистрации для выбора времени встречи. Типы времени, даты и даты и времени не загружают датупик соответствующим образом. Как ни странно, те же самые входы прекрасно работают на страницах в разделе администрирования. Я различал разметку, проверял библиотеки и различал скрипты. Единственными различиями, которые я могу найти, являются идентификаторы и значения и т. Д .: Никакие различия, которые должны нарушить функциональность.

В консоли нет ошибок, и когда я устанавливаю точки останова в Chrome, скрипт, похоже, выполняется.

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

Я трачу примерно столько же времени на написание кода и пытаюсь выяснить эти бешеные неочевидные проблемы. Еще хуже, когда разметка не моя. Спасибо за ваше время.

Редактировать: скрипт инициализации включен для удобства.

$('.date').datetimepicker({ 
    pickTime: false 
}); 

$('.time').datetimepicker({ 
    pickDate: false 
}); 

$('.datetime').datetimepicker({ 
    pickDate: true, 
    pickTime: true 
}); 

Пример кода из документации, без вариантов:

<div class="container"> 
<div class="row"> 
    <div class='col-sm-6'> 
     <div class="form-group"> 
      <div class='input-group date' id='datetimepicker1'> 
       <input type='text' class="form-control" /> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     $(function() { 
      $('#datetimepicker1').datetimepicker(); 
     }); 
    </script> 
</div> 

Некоторые скриншоты, которые показывают свой код на месте, все еще не работает после попытки предлагаемых изменений, и любопытно, что timepicker существует, но все еще не отображается (Chrome)

Div was given an ID

Initialized in Script...

[Еще нет любви ...] [3]

[3]: http://i.stack.imgur.com/7OWQI.png

После попытки все решения, предлагаемые в ответах ниже, я попытался сбросить страницу, чтобы это по умолчанию конфигурации (никаких добавленных скриптов и т. д.), и я обнаружил, что сценарий, который я написал, когда присутствует, не позволяет отображать timepicker. Я могу подтвердить, что инициализация datetimepicker с использованием класса в div контейнера работает так, как ожидалось, когда следующий скрипт отсутствует. Это столкновение?

$(document).ready(function() { 
var originalPrice = $('.list-unstyled h2').text();//get the base price without any options selected. 

var currencySymbol = originalPrice.match(/[\$\xA2-\xA5\u058F\u060B\u09F2\u09F3\u09FB\u0AF1\u0BF9\u0E3F\u17DB\u20A0-\u20BD\uA838\uFDFC\uFE69\uFF04\uFFE0\uFFE1\uFFE5\uFFE6]/g);//Find the currency symbol being used, put it into a variable 
var currencyPosition = originalPrice.indexOf(currencySymbol);//Set the position of the currency symbol in a variable 

if (currencyPosition == 0) {//If the currency symbol precedes the price.. 
    var originalValue = parseFloat(originalPrice.substring(1));//cut it off of the front of the price 
} else {//otherwise.. 
    var originalValue = parseFloat(originalPrice.substring(0, currencyPosition));//cut if off of the end of the price. This doesn't account for 2 character currency symbols. 
} 
optionObject = new Object();//Create a new object to store all the relevant option data in. 

$('select[name^="option"] option, input[name^="option"]').each(function(index, value) {//iterate through all the options and input their data into the object. 
    if($(this).text()) { 

     if($(this).text().match(/(-)\$/g)){ 
      var negative = "-" 
     } else { 
      var negative = false; 
     } 

     if(negative) { 

      optionPrice = parseFloat(negative + $(this).text().match(/(\d+\.\d+)/g)); 

      optionObject[$(this).val()] = optionPrice; //Storing the price, with an optional negative symbol (if present) 
     } else { 
      optionObject[$(this).val()] = parseFloat($(this).text().match(/(\d+\.\d+)/g)); 
     } 

     $(this).text($(this).text().replace(/\(([^)]+)\)/g, ''));//remove pricing from option text 
    } else { 

     if($(this).text().match(/(-)\$/g)){ 
      var negative = "-" 
     } else { 
      var negative = false; 
     } 

     if(negative) { 
      optionPrice = parseFloat(negative + $(this).text().match(/(\d+\.\d+)/g)); 
      optionObject[$(this).val()] = optionPrice;//Storing the price, with an optional negative symbol (if present) 
     } else { 
      optionObject[$(this).val()] = parseFloat($(this).text().match(/(\d+\.\d+)/g)); 
     } 

     optionObject[$(this).val()] = parseFloat($(this).parent().text().match(/(\d+\.\d+)/g)); 
     var children = $(this).parent().children(); 
     $(this).parent().text($(this).parent().text().replace(/(\([^)]+\))/g, '')).prepend(children);//remove pricing from option text 
    } 
}); 

$('select[name^="option"], input[name^="option"]').change(function() { 
    var inputSum = 0; 

    $('select[name^="option"] option:selected, input[name^="option"]:checked').each(function(index, value) { 
     if(!isNaN(optionObject[($(this).val())])){ 
      inputSum = inputSum + optionObject[($(this).val())]; 
     } 
    }); 

    var finalValue = (originalValue + inputSum); 

    if(currencyPosition === 0) { 
     $('.list-unstyled h2').replaceWith('<h2>' + currencySymbol + finalValue + '</h2>'); 
    } else { 
     $('.list-unstyled h2').replaceWith('<h2>' + finalValue + currencySymbol + '</h2>'); 
    } 

    //Show/Hide dependent options. The rest of the code is in the custom_option_choices-HOGAN.xml file 
    switch (this.value) { 

     case '43': // Student Registration 
     case '44': // Student Pre-Registration 
      hideDependents('43'); 
      showDependents('43'); 
      break; 

     case '45': // Standard Registration 
     case '46': // Standard Pre-Registration 
      showDependents('45'); 
      hideDependents('45'); 
      break; 
    } 
}); 
$('#input-option239 option:nth-child(2)').attr('selected', 'selected'); 
$('select[id="input-option239"]').trigger('change'); 
}); 

Я сузил проблему дальше вниз: закомментировать следующую часть вышеприведенного сценария также устраняет проблему.

$('select[name^="option"] option, input[name^="option"]').each(function(index, value) {//iterate through all the options and input their data into the object. 
    if($(this).text()) {   
     if($(this).text().match(/(-)\$/g)){ 
      var negative = "-" 
     } else { 
      var negative = false; 
     } 

     if(negative) { 
      optionPrice = parseFloat(negative + $(this).text().match(/(\d+\.\d+)/g)); 

      optionObject[$(this).val()] = optionPrice; //Storing the price, with an optional negative symbol (if present) 
     } else { 
      optionObject[$(this).val()] = parseFloat($(this).text().match(/(\d+\.\d+)/g)); 
     } 

     $(this).text($(this).text().replace(/\(([^)]+)\)/g, ''));//remove pricing from option text 
    } else { 

     if($(this).text().match(/(-)\$/g)){ 
      var negative = "-" 
     } else { 
      var negative = false; 
     } 

     if(negative) { 
      optionPrice = parseFloat(negative + $(this).text().match(/(\d+\.\d+)/g)); 
      optionObject[$(this).val()] = optionPrice;//Storing the price, with an optional negative symbol (if present) 
     } else { 
      optionObject[$(this).val()] = parseFloat($(this).text().match(/(\d+\.\d+)/g)); 
     } 

     optionObject[$(this).val()] = parseFloat($(this).parent().text().match(/(\d+\.\d+)/g)); 
     var children = $(this).parent().children(); 
     $(this).parent().text($(this).parent().text().replace(/(\([^)]+\))/g, '')).prepend(children);//remove pricing from option text 
    } 
}); 

Answer 1

Я вижу, что ваш элемент .datetime a div .. Это должно быть input, где вам нужно инициализировать datepicker?

Так просто добавить .datetime класс input и инициализировать его, как показано ниже:

$('input.datetime').datetimepicker({ 
    pickDate: true, 
    pickTime: true 
}); 

Проверьте скриншот ниже, который я взял после выполнения предыдущей стадии в console

---

Обновление

Таким образом, я просто добавил id к вашему div и согласно вашему поиску в документации, они назначили его id для div. Проверьте изображения ниже:

DOM

Консоль

Так что, я думаю, вы должны инициализировать его на id для div вместо class

Answer 2

Preferred Время для оценки (пятница 10: 00-2: 00):

<div class="input-group datetime"> 
    <input type="text" name="option[252]" value="" data-date-format="YYYY-MM-DD HH:mm" id="input-option252" class="form-control"><span class="input-group-btn"> 
    <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i>  </button> 
    </span> 
</div> 

И ваш JS является:

$('.datetime').datetimepicker({ 
    pickDate: true, 
    pickTime: true 
}); 

Я думаю, что это должно быть $('.datetime input').datetimepicker({