【发布时间】：2015-10-07 13:42:02
【问题描述】：
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）
[仍然没有爱...][3]
[3]: http://i.stack.imgur.com/7OWQI.png
在尝试了以下答案中提供的所有解决方案后，我尝试将页面重置为默认配置（没有添加脚本等），我发现我编写的脚本在出现时会阻止时间选择器显示.我可以确认，当以下脚本不存在时，使用容器 div 上的类初始化 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
}
});
【问题讨论】：
标签： jquery twitter-bootstrap-3 opencart2.x bootstrap-datetimepicker