Q: Bootstrap4 datepickerinput calender icon is not clickable 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'))

output

Can anyone help me see why the calendar icon is not clickable and provide a solution to make it work?
Thanks in advance.

A: Finally found the answer
Two things
1.have to set jquery to true in settings.py
    BOOTSTRAP4 = {
'include_jquery': True,}

If you are using bootstrap 3 change it to bootstrap3
2.in extrahead of new_as.html
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>

and that's it,
Now the calendar icon is clickable
