0

我对 JavaScript 和 JQuery 比较陌生。我正在尝试在一系列选项卡上实现 Twitter 的引导日期选择器，每个选项卡上都有一个日期选择器。现在（单个选项卡），第一次单击图标时会弹出空框。单击离开并再次单击图标会显示箭头和星期几（周日、周一、周二...）。它不显示月份或日期。我在 base.html 中包含了 CSS、JS 和 less。我的代码如下：

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 是做什么的。如果有人知道它的好资源/它甚至叫什么，我将非常感激。

4

1 回答 1

0

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的工作版本。

于 2013-06-05T08:30:13.513 回答