Question

我正在试图弄清楚出了什么问题，但是由于代码在jsfiddle中运行而不是在我的html页面上，所以我会非常感激任何帮助。发生的事情是显示的时钟和输入时间的花哨框不起作用。

这里是jsfiddle：http://jsfiddle.net/E4xP3/8/

但是当我在我的网站上运行时，我得到了

enter image description here

我接受了下面的建议并更改了我的HTML并且它仍然坏了，我看到人们推荐以下内容但我无法再生成csv http://jsfiddle.net/KUDut/

    $(document).ready(function(){

应该产生什么东西，并且它显然正在起作用06:00 PM出现的价值。

    <div class="input-append bootstrap-timepicker">
<input id="timepicker1" type="text" class="timepicker" value="06:00 PM"/>
<span class="add-on"><i class="icon-time"></i></span>

html代码如下

<html>
<head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="http://jdewit.github.io/bootstrap-timepicker/css/bootstrap-timepicker.min.css" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://jdewit.github.io/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>

</head>
<body>

<div class="input-append bootstrap-timepicker">
<input id="timepicker1" type="text" class="timepicker" value="06:00 PM"/>
<span class="add-on"><i class="icon-time"></i></span>
</div>

<div class="input-append bootstrap-timepicker">
<input id="timepicker2" type="text" class="timepicker" value="06:00 PM"/>
<span class="add-on"><i class="icon-time"></i></span>
</div>
<button id="submit">Generate CSV Time</button>
<br/>
<textarea id="csvContent" rows="10" cols="30" placeholder="CSV content will go here">
</textarea> 

<script>    
$(function() {
$( "#timepicker1" ).timepicker();
});
</script>
<script>
$(function() {
$( "#timepicker2" ).timepicker();
});
</script>  

</body>   

<script type="text/javascript">



$('#timepicker1').timepicker({
defaultTime: 'current',
minuteStep: 1,
disableFocus: true,
template: 'dropdown'
});

$('#timepicker2').timepicker({
defaultTime: 'current',
minuteStep: 1,
disableFocus: true,
template: 'dropdown'
});

$('#submit').click(function() {
    var csv = '';
    var curtime = '';
    $('.timepicker').each(function() {
            csv += curtime = $(this).data('timepicker').getTime();      

            csv += ',' + "\n";
    });
    csv = csv.substr(0, csv.length-2); 
    $('#csvContent').text(csv);
});
}
</script>
</body>
</html>

更改http://imgur.com/325ahbD后

Answer 1

jQuery代码应该是脚本标记。

    <script type="text/javascript">
    $(document).ready(function(){
    $('#timepicker1').timepicker({
    defaultTime: 'current',
    minuteStep: 1,
    disableFocus: true,
    template: 'dropdown'
    });

    $('#timepicker2').timepicker({
    defaultTime: 'current',
    minuteStep: 1,
    disableFocus: true,
    template: 'dropdown'
    });

    $('#submit').click(function() {
        var csv = '';
        var curtime = '';
        $('.timepicker').each(function() {
                csv += curtime = $(this).data('timepicker').getTime()      

                csv += ',' + "\n";
        });
        csv = csv.substr(0, csv.length-2); 
        $('#csvContent').text(csv);
    });
    }
    </script>

Answer 2

更改链接类型=链接rel =＆＃34;样式表＆＃34;帮助我远远超过我想承认的，我真的不明白为什么。

现在唯一的事情就是时间框太小了，你可以选择时间的弹出窗口大到足以显示所需内容的一半http://imgur.com/325ahbD

适用于jsfiddle但不适用于html页面

2 个答案: