Bootstrap 4 datepicker输入日历图标不可点击
Posted
技术标签:
【中文标题】Bootstrap 4 datepicker输入日历图标不可点击【英文标题】：Bootstrap4 datepickerinput calender icon is not clickable 【发布时间】：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，我现在找到了答案。感谢您的宝贵时间 【参考方案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>
就是这样， 现在日历图标可以点击了
【讨论】：
以上是关于Bootstrap 4 datepicker输入日历图标不可点击的主要内容，如果未能解决你的问题，请参考以下文章
datepicker 不是 bootstrap 4.1 中的函数
如何使 ngx-bootstrap datepicker 只能选择和显示月份和年份？
如何使用 bootstrap-datepicker 更新多个输入