简单实现：
前端代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale"> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css"> <link rel="stylesheet" href="/static/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"> <link rel="stylesheet" href="/static/Font-Awesome-3.2.1/css/font-awesome.min.css"> <script src="/static/jquery-3.2.1.min.js"></script> <title>会议室预定</title> <style> .c1 { height: 60px; width: 100%; background-color: #2446AB; font-size: 30px; } .crm { font-family: inherit; color: white; } </style> </head> <body> <div class="c1"> <div class="crm"> <b>会议室预定系统</b> </div> </div> <hr> <div class="container"> <div class="row col-md-12"> <div class="input-append date form_datetim pull-right" data-date="2013-02-21T15:25:00Z"> <input size="16" type="text" value="" readonly> <span class="add-on"><i class="icon-remove"></i></span> <span class="add-on"><i class="icon-calendar"></i></span> <button class="btn btn-primary">保存</button> </div> <p></p> <div class="bs-example" data-example-id="bordered-table"> <table class="table table-bordered"> <thead> <th>会议室</th> {% for time in time_list %} <th>{{ time.1 }}</th> {% endfor %} </tr> </thead> <tbody> {% for room in room_list %} <tr> <td>{{ room.title }}</td> {% for time in time_list %} <td></td> {% endfor %} </tr> {% endfor %} </tbody> </table> </div> </div> </div> <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script src="/static/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script> <script src="/static/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script> {#日期选择器#} <script> $('.date').datetimepicker({ language: 'zh-CN',//显示中文 format: 'yyyy-mm-dd',//显示格式 minView: "month",//设置只显示到月份 initialDate: new Date(),//初始化当前日期 autoclose: true,//选中自动关闭 todayBtn: true//显示今日按钮 }); $("#datetimepicker").datetimepicker({ format: 'yyyy-mm-dd', minView: 'month', language: 'zh-CN', autoclose: true, startDate: new Date() }); </script> <script> </script> </body> </html>