Bootstrap Datepicker顯示框架但不包含日曆

我對JavaScript和JQuery相對來說比較新。我試圖在每個選項卡上有一個日期選擇器的一系列選項卡上實現Twitter的引導日期選擇器。現在（單個標籤），第一次點擊圖標時彈出空框。點擊並再次點擊圖標會顯示箭頭和星期幾（星期日，星期一，星期二......）。它不顯示月份或日期編號。我已經在base.html中包含了CSS，JS等。我的代碼如下：Bootstrap Datepicker顯示框架但不包含日曆

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

來源

2013-06-04 jschabs

你可以在http://jsfiddle.net/重新制作這個問題，然後分享鏈接到小提琴嗎？ –

這是一個原始的工程：http://jsfiddle.net/agriboz/D9Xav/3/。我改編它來重寫我的問題http://jsfiddle.net/PdjpD/1/。兩者的主要區別在於沒有數據綁定，我擺脫了輸入。顯然這是必要的？ – jschabs

您需要設置一個日期來選擇顯示在日曆時，通過設置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-05 08:30:13 albertedevigo

謝謝，這似乎工作。 – jschabs

Bootstrap Datepicker顯示框架但不包含日曆

回答

相關問題