引入css
<link rel="stylesheet" href="{% static 'plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css' %}">
引入js
<script src="{% static 'plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js' %}"></script>
<script src="{% static 'plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>
<script>
$(function () {
$('#id_create_time').datetimepicker({
format: 'yyyy-mm-dd',
minView: 'month',//设置时间选择为年月日 去掉时分秒选择
todayBtn: true, //如果此值为true 或 "linked",则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话,"Today" 按钮仅仅将视图转到当天的日期,如果是"linked",当天日期将会被选中。
language: 'zh-CN',
autoclose: true, //当选择一个日期之后是否立即关闭此日期时间选择器。
keyboardNavigation: true, //是否允许通过方向键改变日期。
forceParse: true, //当选择器关闭的时候,是否强制解析输入框中的值。
todayHighlight: 1 //如果为true, 高亮当前日期
});
})
</script>
html中
<input type="text" id='id_create_time' class="form-control" placeholder="入职时间" name="create_time"/>
注:如果是django ModeForm,input框会自动生成一个id名,所以直接将js方法名设置成默认的id即可。