Bootstrap 4 datepicker输入日历图标不可点击答案

【问题标题】：Bootstrap4 datepickerinput calender icon is not clickableBootstrap 4 datepicker输入日历图标不可点击
【发布时间】：2020-10-27 14:54:52
【问题描述】：

base.html

{% block content %} {% endblock %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<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>

new_as.html

{% extends "base.html" %}
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{% block extrahead %}
{{ form.media }}
{% endblock %}
{% block content %}
<body>
    <div  style="background-color:#0062cc;color:white">
        <h1 style="padding-left:50px"  class="gfont"><a href="{% url 'main_page'%}" style="color:white"> Assignments</a>
        <p class="title gt">{{ stu }}<a href="/logout" style="padding-left:10px;font-size:15px;color:orange">logout</a></p></h1><hr>
    </div>
    <span style="float:left;padding-left:20px"><button onclick="javascript:history.go(-1);" class="btn btn-primary">Back</button></span>
     <div class="box" align="center" style="margin-bottom:1cm">
           <form action="new_assignment" method="post" enctype="multipart/form-data">
               {% csrf_token %}
               {{ form.media }}
               {% bootstrap_form form %}
               {% for error in form.non_field_errors %}
                    <p>{{error}}</p>
               {% endfor %}
               <br>
               <button type="submit" name="True" class="btn btn-warning">Save and add another question</button>
               <button type="submit" name="False" class="btn btn-primary">Save and exit</button>
           </form>
    </div>
</body>
{% endblock %}

forms.py

pub_date = forms.DateTimeField(label='Publish date', widget=DateTimePickerInput(format='%m/%d/%Y'))

输出

谁能帮我看看为什么日历图标不可点击并提供解决方案使其正常工作？提前致谢。

【问题讨论】：

您只需要日期选择器或日期时间选择器？
我需要 datetimepicker，我现在找到了答案。感谢您的宝贵时间

标签： javascript python html django bootstrap-4

【解决方案1】：

终于找到答案了

两件事

1.必须在settings.py中设置jquery为true

    BOOTSTRAP4 = {
'include_jquery': True,}

如果您使用的是 bootstrap 3，请将其更改为 bootstrap3

2. 在 new_as.html 的额外标题中

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>

就是这样，现在日历图标可以点击了

【讨论】：