Python、Djangoを利用したWEBシステムをローカル環境で開発しています。

フォームで、カレンダー形式のウィジェットで年月日の情報を取得し、データベースへ登録という動きをさせるために、django-bootstrap-
datepicker-plusのモジュールを使用しています。

公式ドキュメントを参考にして、コードを追加しているのですが、うまく機能しません。  
参考にしたサイト：<https://pypi.org/project/django-bootstrap-datepicker-plus/>

解決の方法について、ご教授いただきないでしょうか？

実行環境  
django-bootstrap-datepicker-plus: 3.0.5  
Python: 3.7.5  
Django: 2.2.2

* * *

**うまく機能しない状況**

[![](https://i.stack.imgur.com/1OqKw.png)](https://i.stack.imgur.com/1OqKw.png)

このように表示されて、カレンダー形式で選択できるのが正常なのに対し、  
[![画像の説明をここに入力](https://i.stack.imgur.com/Bbgkb.png)](https://i.stack.imgur.com/Bbgkb.png)

このように、右端のアイコンの表示がおかしくなり、カレンダーが出ない

* * *

**関係ファイルのコーディング等**

モジュールのインストール

```

    pip3 install django-bootstrap-datepicker-plus
    
```

bootstrap4のインストール（'bootstrap4' is not a registered tag library.のエラーが出たため）

```

    pip3 install django-bootstrap4
    
```

settings.py

```

    INSTALLED_APPS = [
        'django.contrib.admin',
         ...
        'bootstrap_datepicker_plus',
        'bootstrap4'
    ]
    
    BOOTSTRAP4 = {
        'include_jquery': True,
    }
    
```

models.py

```

    from django.db import models
    
    class Event(models.Model):
    
        start_date = models.DateField()
    
        class Meta:
            verbose_name_plural = 'Event'
    
```

form.py

```

    from bootstrap_datepicker_plus import DatePickerInput
    from django import forms
    from .models import Event
    
    class EventForm(forms.ModelForm):
        class Meta:
            model = Event
            fields = ['start_date',]
             widgets = {
                'start_date': DatePickerInput(
                    format='%Y-%m-%d',
                    options={
                        'locale': 'ja',
                        'dayViewHeaderFormat': 'YYYY年 MMMM',
                    }
                ), }
    
```

views.py

```

    from django.contrib.auth.mixins import LoginRequiredMixin
    from django.urls import reverse_lazy
    from django.views import generic
    from .forms import EventForm
    from django.contrib import messages
    from .models import Event
    
    class EventView(LoginRequiredMixin, generic.CreateView):
        model = Event
        template_name = 'event.html'
        form_class = EventForm
        success_url = reverse_lazy('app:index')
    
        def form_valid(self, form):
            resister_event = form.save(commit=False)
            resister_event.user = self.request.user
            resister_event.save()
    
            messages.success(self.request, '登録しました')
            return super().form_valid(form)
    
        def form_invalid(self, form):
            messages.error(self.request, "登録に失敗しました。")
            return super().form_invalid(form)
    
```

event.html

```

    {% extends "layout.html" %}
    
    {% load bootstrap4 %}
    {% bootstrap_css %}
    {% bootstrap_javascript jquery='full' %}
    {{ form.media }}
    
    {% block body %}
    {% block title %}
    resister_new_vegetable
    {% endblock %}
    {% block content %}
    <form action="" method="post" class="form-horizontal form-label-left">
        {% csrf_token %}
        <div class="form-group row">
            <label class="control-label col-md-4 col-sm-4 ">開始日</label>
            <div class="col-md-8 col-sm-8 ">
                {{ form.start_date }}
            </div>
        </div>
        <button type="submit" class="btn btn-primary">登録</button>
    </form>
    {% endblock %}
    
```

layout.html

```

    <!DOCTYPE html>
    {% load static %}
    
    <html lang="ja">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" href="{% static 'images/favicon.ico' %}" type="image/ico"/>
    
        <title>{% block title %}{% endblock %}</title>
    
        <!-- Bootstrap -->
        <link href="{% static 'vendors/bootstrap/dist/css/bootstrap.min.css' %}" rel="stylesheet">
        <!-- Font Awesome -->
        <link href="{% static 'vendors/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">
        <!-- NProgress -->
        <link href="{% static 'vendors/nprogress/nprogress.css' %}" rel="stylesheet">
        <!-- iCheck -->
        <link href="{% static 'vendors/iCheck/skins/flat/green.css' %}" rel="stylesheet">
    
        <!-- bootstrap-progressbar -->
        <link href="{% static 'vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css'%}"
              rel="stylesheet">
        <!-- JQVMap -->
        <link href="{% static 'vendors/jqvmap/dist/jqvmap.min.css' %}" rel="stylesheet"/>
        <!-- bootstrap-daterangepicker -->
        <link href="{% static 'vendors/bootstrap-daterangepicker/daterangepicker.css' %}"
              rel="stylesheet">
    
        <!-- Custom Theme Style -->
        <link href="{% static 'build/css/custom.min.css' %}" rel="stylesheet">
    
        {% block javascript %}
        {% endblock %}
        {% block custom_css %}
        {% endblock %}
    </head>
    
    {% block body %}
    {% endblock %}
    
    
    <!-- jQuery -->
    <script src="{% static 'vendors/jquery/dist/jquery.min.js' %}"></script>
    <!-- Bootstrap -->
    <script src="{% static 'vendors/bootstrap/dist/js/bootstrap.bundle.min.js' %}"></script>
    <!-- FastClick -->
    <script src="{% static 'vendors/fastclick/lib/fastclick.js'%}"></script>
    <!-- NProgress -->
    <script src="{% static 'vendors/nprogress/nprogress.js'%}"></script>
    <!-- Chart.js -->
    <script src="{% static 'vendors/Chart.js/dist/Chart.min.js'%}"></script>
    <!-- gauge.js -->
    <script src="{% static 'vendors/gauge.js/dist/gauge.min.js'%}"></script>
    <!-- bootstrap-progressbar -->
    <script src="{% static 'vendors/bootstrap-progressbar/bootstrap-progressbar.min.js'%}"></script>
    <!-- iCheck -->
    <script src="{% static 'vendors/iCheck/icheck.min.js'%}"></script>
    <!-- Skycons -->
    <script src="{% static 'vendors/skycons/skycons.js'%}"></script>
    <!-- Flot -->
    <script src="{% static 'vendors/Flot/jquery.flot.js'%}"></script>
    <script src="{% static 'vendors/Flot/jquery.flot.pie.js'%}"></script>
    <script src="{% static 'vendors/Flot/jquery.flot.time.js'%}"></script>
    <script src="{% static 'vendors/Flot/jquery.flot.stack.js'%}"></script>
    <script src="{% static 'vendors/Flot/jquery.flot.resize.js'%}"></script>
    <!-- Flot plugins -->
    <script src="{% static 'vendors/flot.orderbars/js/jquery.flot.orderBars.js'%}"></script>
    <script src="{% static 'vendors/flot-spline/js/jquery.flot.spline.min.js'%}"></script>
    <script src="{% static 'vendors/flot.curvedlines/curvedLines.js'%}"></script>
    <!-- DateJS -->
    <script src="{% static 'vendors/DateJS/build/date.js'%}"></script>
    <!-- JQVMap -->
    <script src="{% static 'vendors/jqvmap/dist/jquery.vmap.js'%}"></script>
    <script src="{% static 'vendors/jqvmap/dist/maps/jquery.vmap.world.js'%}"></script>
    <script src="{% static 'vendors/jqvmap/examples/js/jquery.vmap.sampledata.js'%}"></script>
    <!-- bootstrap-daterangepicker -->
    <script src="{% static 'vendors/moment/min/moment.min.js'%}"></script>
    <script src="{% static 'vendors/bootstrap-daterangepicker/daterangepicker.js'%}"></script>
    
    <!-- Custom Theme Scripts -->
    <script src="{% static 'build/js/custom.min.js'%}"></script>
    <body>
    {% block script %}{% endblock %}
    
    </body>
    </html>
    
```
CC BY-SA 4.0
2020-01-11T10:48:46.440
62157
2020-01-25T02:39:26.883
2020-01-25T02:39:26.883
32986
36988
question
python python3 django twitter-bootstrap
django-bootstrap-datepicker-plusを利用したフォームがうまく機能しない
下記のサイトページを参考にする事で解決できました（アイコンの表示に不具合残りますが、機能は果たしています。  
<https://monim67.github.io/django-bootstrap-datepicker-plus/configure/>

質問で紹介した場合ですと、  
event.htmlとlayout.htmlに変更を加える必要がありました。

event.html

```

    {% extends "layout.html" %}
    
    {% block extrahead %}
    {{ form.media }}
    {% endblock %}
    
```

layout.html

```

    {% load bootstrap4 %}
    {% bootstrap_css %}
    {% bootstrap_javascript jquery='full' %}
    
    {% block extrahead %}
    {% endblock %}
    
```
CC BY-SA 4.0
2020-01-11T12:14:33.920
62160
2020-01-11T12:14:33.920
36988
62157
answer