0

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


うまく機能しない状況

このように表示されて、カレンダー形式で選択できるのが正常なのに対し、
画像の説明をここに入力

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


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

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

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>

1 件の回答 1

1

下記のサイトページを参考にする事で解決できました(アイコンの表示に不具合残りますが、機能は果たしています。
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 %}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。