1. 时间日期插件【bootstrap-datepicker】
1.1 效果展示
1.2 引入CSS与JS文件
{# static标签一定要放在extends标签之下 #}
{% load static %}
<link rel="stylesheet" href="{% static 'plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css' %}">
<script src="{% static 'plugins/bootstrap-datepicker/js/bootstrap-datepicker.js' %}"></script>
<script src="{% static 'plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>
1.3 引入日期标签
<input type="text" class="form-control" id="dt" name="create_time" placeholder="入职时间">
<script>
$(function () {
$('#dt').datepicker({
format: 'yyyy-mm-dd',
startDate: '0',
language: 'zh-CN',
autoclose: true
});
})
</script>
注意:如果使用的是ModelForm,则不需要写Input标签,JS修改为以下内容
这里的dt需要修改为id_字段名【这是ModelForm自动生成的ID】
<script>
$(function () {
$('#id_字段名').datepicker({
format: 'yyyy-mm-dd',
startDate: '0',
language: 'zh-CN',
autoclose: true
});
})
</script>