相关datetimepicker用法查看官网http://eonasdan.github.io/bootstrap-datetimepicker/
{% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试datetimepicker插件</title> {#需要引入js、css文件#} <script src="{% static "components/jquery/dist/jquery.js" %}"></script> <script src="{% static "components/bootstrap/dist/js/bootstrap.js" %}"></script> <link rel="stylesheet" href="{% static "ace/css/bootstrap.css" %}"/> <script src="{% static "components/moment/moment.js" %}"></script> <link href="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.js"></script> {#重要,弹出日历里面显示的文字bootstrap里面显示的是英文 ,触发后显示的年月日等的显示文字,即为:Jan,feb等#} <script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.fr.js"></script> {#中文显示#} <script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script> </head> <body> <input type="text" id="start_time" name="start_time"> <input type="text" id="end_time" name="end_time"> </body> </html> <script> $('#start_time').datetimepicker({ format: 'yyyy-mm-dd hh:ii:ss', todayBtn:true, clearBtn:true, }); $('#end_time').datetimepicker({ format: 'yyyy-mm-dd hh:ii:ss', todayBtn:true, }); </script>