web-dev-qa-db-ja.com

Djangoフォーム-Django-bootstrap-datepicker-plusはdatepickerをレンダリングしていません

Django-bootstrap-datepicker-plus ウィジェットを この回答 に従ってレンダリングしようとすると、不便があります。すべて正常に動作しますが、Datepickerが表示されません。

私のDjangoバージョンは1.10.7で、使用しているサードパーティのアプリは次のとおりです。

これは私のforms.pyです。DateInputクラスをオーバーライドして、必要に応じてカスタマイズします。

from Django import forms
from bootstrap_datepicker.widgets import DatePicker

class DateInput(DatePicker):
    def __init__(self):
        DatePicker.__init__(self,format="%Y-%m-%d")

class UserUpdateForm(forms.ModelForm):
    class Meta:
        widgets = {     
            'date_of_birth': DateInput(),  # datepicker
            'creation_date': DateInput(), # datepicker
        }
        fields = ("other fields", "date_of_birth", "creation_date", "other fields",)
        model = get_user_model()

次に、テンプレートフォームに、layout.htmlという名前のベースマスターテンプレートがあります。テンプレートuser_form.htmlには、前述のフォームフィールドをレンダリングします。このすべてのテンプレートには、user_form.htmlファイル ここ に示されているように、いくつかのdivとhtml構造があります。

bootstrap私のsettings.pyの設定では、include_jqueryオプションをTrueにする必要があります

フォームページに移動すると、date_of_birthフィールドはカレンダーの日付ピッカーとして表示されません。これは、ユーザーが手動で特定の形式で日付を入力する必要がある入力タイプのテキストとして表示されます。

私のlayout.htmlでは、いくつかの追加のcdnjQueryリソースを別のものに呼び出しています。

  • これは競合を引き起こしていますか？
  • フォームフィールドのdatepickerウィジェットがレンダリングされないのはなぜですか？

[以下のコメントはこの編集よりもはるかに古い]

javascriptdjangodatepickerdjango-formsbootstrap-datepicker
10
bgarcial

使用している Django-bootstrap-datepicker-plus これはDjangoバージョン> = 1.8で動作するため、Djangoバージョン1.10.7。インストールページに記載されているとおりにすべてを正しく実行した場合は、次のチェックリストをチェックして、すべてが適切に行われているかどうかを確認することをお勧めします。

ウィジェットが機能するためのチェックリスト

  • jQueryが必要です。 ブートストラップ設定 でinclude_jqueryオプションをTrueに設定してください。
  • マスターテンプレートのヘッドセクションに次のタグが含まれていることを確認してください。
   {% load bootstrap3 %}       {# imports bootstrap3 #}
   {% bootstrap_css %}         {# Embeds Bootstrap CSS #}
   {% bootstrap_javascript %}  {# Embeds Bootstrap JS #}
   {% block extrahead %}       {# Embeds Extra Resources #}
   {% endblock %}              {# Ends Extra Resources #}
  • 次のタグブロックがフォームテンプレートの上部にあることを確認してください。
   {% block extrahead %}   {# Extra Resources Start #}
   {{ form.media }}        {# Form required JS and CSS #}
   {% endblock %}          {# Extra Resources End #}

UPDATE：バグが見つかりました

問題はまさにあなたが推測したものです。 "layout.htmlで、追加のcdn jQueryリソースを別のものに呼び出しています。これにより競合が発生していますか？"

layout.htmlを調べたところ、2つのjQueryライブラリが含まれていることがわかりました。1つは22行目、もう1つは299行目で、include_jqueryオプションがtrueに設定されているとのことです。そうです、彼らは対立しています。 datepickerはbootstrap option include_jqueryによってロードされたjQueryにバインドされており、そのjQueryは行＃299のjQueryによってオーバーライドされています。

解決策：

解決策は、テンプレートにjQueryを1つだけ保持することです。テンプレート内のすべてのjQueryを削除し、include_jqueryをtrueにのみ保持します。または、他のスクリプトの前にマスターテンプレートのヘッダーに1つのjQueryのみを保持し、include_jqueryをfalseに設定します。

4
Munim Munna

これらのリンクタグをbase.htmlテンプレートに追加し、そこからhtmlテンプレートフォームに拡張してみてください。

<link href="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.44/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>

そして追加{{ form.media }}テンプレートフォームに例：

      <form class="mt-3" action="" method="post">{% csrf_token %}
          {{ form.as_p }}
          {{ form.media }}
          <div class="text-center">
            <input class="btn btn-primary btn-block" type="submit" value="Update" />
          </div>
      </form>

これで、Django-bootstrap-datepicker-plusに関する私の問題は解決しました。そのパッケージには、簡単で例のある、より詳細なドキュメントが必要です。ただし、構成すると非常にうまく機能します。

3
nilsoviani