Bootstrap Datepicker, показывающий рамку, но не календарь

Я относительно новичок в JavaScript и JQuery. Я пытаюсь внедрить загрузчик bootstrap Twitter на нескольких вкладках, на которых есть датпикер на каждой вкладке. Прямо сейчас (одна вкладка) пустой фрейм всплывает при первом щелчке значка. Нажав на значок, нажмите стрелки и дни недели (вс, пн, Вт, ...). Он не показывает номера месяца или дня. Я включил CSS, JS и меньше в base.html. Мой код ниже: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>

Tabs 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> 
<% } %>

Любая помощь будет принята с благодарностью. Прошу прощения, если это что-то простое, что я пропустил.

EDIT: Кроме того, я пытаюсь выяснить, что 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, показывающий рамку, но не календарь

ответ

Смежные вопросы