Question

我对JavaScript和JQuery相对较新。我试图在一系列选项卡上实现Twitter的bootstrap datepicker，每个选项卡上都有一个日期选择器。现在（单个选项卡），第一次单击该图标时弹出空框。单击并再次单击该图标将显示箭头和星期几（星期日，星期一，星期二，...）。它不显示月份或日期数字。我在base.html中包含了CSS，JS等等。我的代码如下：

的JavaScript

//implemented within another method
this.$('li.tab i').datepicker('autoclose', true, 'update', Date.today().toString("mm/dd/yyyy")).on('changeDate', function(ev){ this.$('li.tab i').datepicker("show"); });

base.html文件

<head>
    <link rel=stylesheet href="{{ CSS_URL }}/datepicker.css">
    <link rel=stylesheet href="{{ CSS_URL }}/datepicker.less">
</head>
<body>
    <script>
        require = {
                baseUrl: "{{ JAVASCRIPT_URL }}",
                config:{
                    tpl: {
                       variable:'data'
                    }
                },
                shim: {
                    underscore: {
                        exports: '_'
                    },
                    backbone: {
                        deps: ['underscore', 'jquery'],
                        exports: 'Backbone'
                    },
                    bootstrap: ['jquery'],
                    select2: ['jquery'],
                    'backbone.marionette': ['backbone'],
                    'jquery.tokeninput': ['jquery'],
                    'datepicker': ['jquery']
                }
            };
    </script>
</body>

标签html

<li><a class="btn add" href="#"><i class="icon-plus"></i></a></li>
<% for (m in data.models) {%>
    <li class="tab" >
        <a data-model=<%= data.models[m].cid %> href="#datapoint<%= data.models[m].cid %>" data-toggle="tab"><%= data.models[m].get('date') %>
            <div class="input-append date datepicker" data-date-format="mm/dd/yyyy">
                <i class="icon-calendar pull-right" style="margin-left:10px;cursor:pointer;">
                </i>
            </div>
        </a>
    </li>
<% } %>

非常感谢任何帮助。如果我错过了一些简单的事情，我会道歉。

编辑：此外，我正在试图找出...内的HTML内容。确实。如果有人知道它的良好资源/它甚至被称为什么，我将非常感激。

Answer 1

您需要设置显示日历时要选择的日期，方法是设置data-date属性：

<div class="input-append date" id="datepicker" data-date="05-06-2013" data-date-format="dd-mm-yyyy">
    <input class="span2" size="16" type="text" readonly="readonly" />
    <span class="add-on"><i class="icon-calendar"></i></span>
</div>

以下是jsfiddle的工作版本。

Bootstrap Datepicker显示框架但不显示日历

1 个答案: