0

私は JavaScript と JQuery に比較的慣れていません。各タブに日付ピッカーがある一連のタブに Twitter のブートストラップ日付ピッカーを実装しようとしています。現在（単一のタブ）、アイコンの最初のクリックで空のフレームがポップアップします。アイコンをクリックしてもう一度クリックすると、矢印と曜日 (日、月、火、...) が表示されます。月や日の数字は表示されません。CSS、JS、および less を base.html に含めました。私のコードは以下の通りです：

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 に答える