2017-10-15 165 views
1

作爲初學者我經常與理解Python的Django中,HTML,JavaScript和CSS之間的連接鬥爭。無響應的django-bootstrap3-的DateTimePicker(未示出日曆)

眼前的問題是這樣的:我試圖從django-bootstrap3-datetimepicker-2實施的DateTimePicker控件。

因爲這個庫不包括JS/CSS的資產,我一開始就沒有後端參與實施的DateTimePicker只是爲了看看我是否正確加載的所有靜態文件等。因此,我加入this example到HTML模板:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-6"> 
      <div class="form-group"> 
       <div class="input-group date" id="datetimepicker1"> 
        <input type="text" class="form-control"> 
        <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
     <script type="text/javascript"> 
      $(function() { 
       $('#datetimepicker1').datetimepicker(); 
      }); 
     </script> 
    </div> 
</div> 

一切工作按計劃,所以我想實現的DateTimePicker從Django表單的控件:

class FooForm(forms.Form): 
    pick_a_date = forms.DateTimeField(
     widget=DateTimePicker(options={ 
      "format": "YYYY-MM-DD", 
      "pickTime": False} 
     )) 

我也想從表單嚮導受益(即從formtools.wizard SessionWizardView),所以我輸出上述形式成HTML這樣的:

<form action="" method="post" role="form">{% csrf_token %} 
    <table> 
    {{ wizard.management_form }} 
    {% if wizard.form.forms %} 
     {{ wizard.form.management_form }} 
     {% for form in wizard.form.forms %} 
      {{ form }} 
     {% endfor %} 
    {% else %} 
     {{ wizard.form }} 
    {% endif %} 
    </table> 

然而,插件是不respons ive(日曆窗口未顯示,glyphicon-calendar圖標不起任何作用)。當我離開測試日期時間選擇器(最近工作的)時,兩者都會中斷。

開發者控制檯打印如下:

Uncaught TypeError: option pickTime is not recognized! 
    at Boolean.<anonymous> (bootstrap-datetimepicker.js:1440) 
    at Function.each (jquery-2.1.1.min.js:2) 
    at Object.picker.options (bootstrap-datetimepicker.js:1436) 
    at dateTimePicker (bootstrap-datetimepicker.js:2276) 
    at HTMLDivElement.<anonymous> (bootstrap-datetimepicker.js:2309) 
    at Function.each (jquery-2.1.1.min.js:2) 
    at n.fn.init.each (jquery-2.1.1.min.js:2) 
    at n.fn.init.$.fn.datetimepicker (bootstrap-datetimepicker.js:2304) 
    at HTMLDocument.<anonymous> ((index):154) 
    at j (jquery-2.1.1.min.js:2) 

我百思不得其解,我甚至不知道去哪裏找。你知道有什麼文章或文件能向我解釋嗎?請指教。

我經歷了一些githubs項目,他們似乎沒有比我更多的東西(尤其是我擔心它是模板標籤,但大多數只是{%load bootstrap3%},有些有{加載靜態%},我也有)。我也試過這個suggestion

+0

您是如何安裝包裝的?瀏覽器的控制檯中是否有輸出? – vipertherapper

+0

PIP安裝的git + HTTPS://github.com/tutorcruncher/django-bootstrap3- 的DateTimePicker(此叉支援Django 1.11)。瀏覽器控制檯顯示'Uncaught TypeError:option pickTime is not recognized!'我會將整個事情添加到帖子中。 –

+0

你可以刪除你安裝的軟件包,然後用'pip install django-bootstrap3-datetimepicker-2'重新安裝它? – vipertherapper

回答

1

更改Django的表單的格式dd/MM/YYYY。此外,從窗體中刪除pickTime。我相信這些在早期版本中有所改變;也許你用過的例子已經過時了。

+0

@Pawel將格式改回「yyyy-mm-dd」實際上可能會禁用'hasTime'。試試看。 – vipertherapper

+0

不幸的是,字母和大寫字母的順序都必須保留。此外,我不時得到隨機驗證錯誤,所以暫時我開始「格式化」:「YYYY-MM-DD HH:mm」。不過,我很樂意爲這個問題提供解決方案。 –

+0

我想弄清楚。顯然,顯示的小時/分鐘是由格式決定的。 – vipertherapper

相關問題