Bootstrap datetimepicker 不工作，没有控制台错误 - 脚本冲突？

Question

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

使用OpenCart，并添加了一个时间字段供注册者选择预约时间。时间、日期和日期时间选项类型无法正确加载日期选择器。奇怪的是，相同的输入在管理部分的页面上工作得很好。我区分了标记、检查了库并区分了脚本。我能找到的唯一区别是 ID 和值等：没有任何会破坏功能的区别。

控制台没有错误，当我在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>

~~一些显示我的代码的屏幕截图，在尝试建议的更改后仍然无法正常工作，奇怪的是，时间选择器存在，但仍然不会显示 (Chrome)~~

Div was given an ID

Initialized in Script...

[还是没有爱...][3]

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

在尝试了下面答案中提供的所有解决方案后，我尝试将页面重置为默认配置（没有添加脚本等），我发现我编写的脚本在存在时会保留时间选择器从显示。我可以确认在容器 div 上使用 class 初始化 datetimepicker 在不存在以下脚本时按预期工作。这是碰撞吗？

$(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

首选评估时间（周五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({

Answer 2

我看到你的 .datetime 元素是一个 div.. 它应该是 input 你需要初始化的地方 datepicker?

所以只需将 .datetime class 添加到 input 并初始化如下：

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

检查下面的屏幕截图，这是我在 console

中执行上述步骤后截取的

更新

所以我刚刚向您的 div 添加了一个 id，并且根据您在文档中的查找，他们已将其分配给 id 以获得 div。查看以下图片：

DOM

控制台

So, I think you should initialize it on id for div instead of class

Bootstrap datetimepicker 不工作，没有控制台错误 - 脚本冲突？

Bootstrap datetimepicker not functioning, no console errors - conflicting script?

jquery

twitter-bootstrap-3

bootstrap-datetimepicker

opencart2.x