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>