无法使bootstrap datepicker工作

时间:2014-05-23 00:07:08

标签: javascript jquery twitter-bootstrap

已经尝试让Datepicker for Bootstrap工作,但一直没有成功。日期选择框从不显示:

<head>
    <title>Pick-a-Date</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/datepicker.css">
    <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/bootstrap-datepicker.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Select date</h3>
        </div>
        <div class="panel-body">
            <div class="input-append date" id="datepick" data-date="<?=date('m-d-Y', strtotime('-25 hours')) ?>" data-date-format="dd-mm-yyyy">
                <input class="span2" size="16" type="text" value="<?=date('m-d-Y', strtotime('-25 hours')) ?>">
                <span class="add-on"><i class="icon-calendar"></i></span>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function() {
        $('#datepick').datepicker({
            format: "yyyy/mm/dd",
            autoclose: true,
            todayHighlight: true
        });
    });
</script>
</body>

这是小提琴: http://jsfiddle.net/eComEvo/7svU3/2/

知道出了什么问题吗?

1 个答案:

答案 0 :(得分:0)

如果您将对bootstrap datepicker的引用更改为可解析的内容,例如//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js,它有效。

http://jsfiddle.net/eComEvo/7svU3/2/

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Select date</h3>
        </div>
        <div class="panel-body">
            <div class="input-append date" id="datepick" data-date="22-05-2014" data-date-format="dd-mm-yyyy">
                <input class="span2" size="16" type="text" value="22-05-2014">
                <span class="add-on"><i class="icon-calendar"></i></span>
            </div>
        </div>
    </div>
</div>

$(function() {
    $('#datepick').datepicker({
        format: "yyyy/mm/dd",
        autoclose: true,
        todayHighlight: true
    });
});