Bootstrap datetimepicker无法正常运行,没有控制台错误 - 脚本冲突?

时间:2015-10-07 13:42:02

标签: jquery twitter-bootstrap-3 opencart2.x bootstrap-datetimepicker

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上的类初始化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
    }   
});

2 个答案:

答案 0 :(得分:1)

我发现您的.datetime元素是div .. input应该是datepicker,您需要初始化.datetime

只需将input类添加到$('input.datetime').datetimepicker({ pickDate: true, pickTime: true }); 并按以下方式初始化:

console

查看我在id

执行上述步骤后拍摄的以下屏幕截图

Here is the proof

<强>更新

所以我刚刚在div添加了id,根据您在文档中的查询,他们已将div分配给id。检查以下图片:

<强> DOM

Added Id

<强>控制台

After executing in console

  

因此,我认为您应该在div上为class而不是public class MyClass(IRepo repo) { _repo = repo; } public void MyMethod() { using ( var db = new DbContxt() ) { var repo = new Repo(db); repo.GetById(1); } } 初始化它   from contextlib import closing # http://stackoverflow.com/a/25968716/968442 from multiprocessing.pool import Pool with closing(Pool(len(url))) as pool: pool.map(btl_test, url)

答案 1 :(得分:0)

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