Form using django-bootstrap-datepicker-plus does not work well

We are developing a web system using Python and Django in a local environment.

The form uses the django-bootstrap-datepicker-plus module to retrieve the date and time information in the calendar format widget and to register it in the database.

I have added code based on the official documentation, but it doesn't work well.
Sites referenced: https://pypi.org/project/django-bootstrap-datepicker-plus/

Could you tell me how to solve this problem?

Run Environment
django-bootstrap-datepicker-plus: 3.0.5
Python: 3.7.5
Django: 2.2.2

Not working

While it is normal to be able to select in calendar format,

Thus, the icon on the far right is displayed incorrectly, and the calendar does not appear

coding relationship files

Installing Modules

 pip3 install django-bootstrap-datepicker-plus

Installing bootstrap 4 (due to the error '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 Year 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):
        register_event=form.save(commit=False)
        register_event.user=self.request.user
        register_event.save()

        messages.success(self.request, 'Registered')
        return super().form_valid(form)

    default_invalid(self, form):
        messages.error(self.request,"Registration failed.")
        return super().form_invalid(form)

event.html

{%extends"layout.html"%}

{% load bootstrap 4%}
{% bootstrap_css%}
{% bootstrap_javascript jquery='full'%}
{{ form.media}}

{% block body%}
{% block title%}
register_new_vegetable
{% endblock%}
{% US>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-4col-sm-4">Start Date</label>
        <div class="col-md-8col-sm-8">
            {{ form.start_date}}
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Register</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.-->
    <metacharset="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-datarangepicker/datarangepicker.css'%}"
          rel="stylesheet" >

    <!--Custom Theme Style-->
    <link href="{%static'build/css/custom.min.css'%}"rel="stylesheet">

    {% US>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/moments/min/moment.min.js'%}">/script>
<script src="{%static'vendors/bootstrap-datarangepicker/datarangepicker.js'%}">/script>

<!--Custom Theme Scripts-->
<script src="{%static'build/js/custom.min.js'%}">/script>
<body>
{% block script%}{%endblock%}

</body>
</html>

python python3 django twitter-bootstrap

2022-09-30 17:55

1 Answers

I was able to solve this problem by referring to the website page below (although the icon remains defective, it works).
https://monim67.github.io/django-bootstrap-datepicker-plus/configure/

In the case of introducing in the question,
You had to make changes to event.html and layout.html.

event.html

{%extends"layout.html"%}

{% US>blockextrahead%}
{{ form.media}}
{% endblock%}

layout.html

{%loadbootstrap4%}
{% bootstrap_css%}
{% bootstrap_javascript jquery='full'%}

{% US>blockextrahead%}
{% endblock%}

2022-09-30 17:55

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656