Bootstrap时间选择插件datetimepicker使用

导入相关插件

<link rel="stylesheet" href="/static/plugin/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
<script src="{% static ‘/plugin/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js‘ %}"></script>
<script src="{% static ‘/plugin/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js‘ %}"></script>

相关body代码

<div class="form-group">
    <label class="col-sm-3 control-label" for="classname">有效时间</label>
    <div class="col-sm-3">
        <input id="starttime" class="form-control" type="text" readonly placeholder="请选择开始时间">
    </div>
    <div class="col-sm-3">
        <input id="endtime" class="form-control" type="text" readonly placeholder="请选择结束时间">
    </div>
</div>

相关js代码及解释

$(‘#starttime‘).datetimepicker(
    {
        format: ‘yyyy-mm-dd hh:ii:ss‘, // 显示格式 精确到分
        autoclose: true, // 选完时间后，窗口自动关闭
        todayBtn: true, // 当天日期按钮
        pickerPosition: "bottom-right", // 选择框位置
        startDate: new Date(), //date之前的时间不能选
        daysOfWeekDisabled: [0, 6], // 一周的周六和周天不能选
        minView: 0, //时间精确度 [0-4]分-年
        todayHighlight: true, // 当天日期高亮
        language: ‘zh-CN‘, // 显示语言
        minuteStep: 5, // 最小的分钟区间
        initialDate: true, // 默认时间
    });

$(‘#endtime‘).datetimepicker(
    {
        format: ‘yyyy-mm-dd hh:ii:ss‘, // 显示格式 精确到分
        autoclose: true, // 选完时间后，窗口自动关闭
        todayBtn: true, // 当天日期按钮
        pickerPosition: "bottom-right", // 选择框位置
        startDate: new Date(), //date之前的时间不能选
        daysOfWeekDisabled: [0, 6], // 一周的周六和周天不能选
        minView: 0, //时间精确度 [0-4]分-年
        todayHighlight: true, // 当天日期高亮
        language: ‘zh-CN‘, // 显示语言
        minuteStep: 5, // 最小的分钟区间
        //showMeridian:true, // 是否显示上下午
        initialDate: true, // 默认时间
    });

原文地址：https://www.cnblogs.com/oldpai/p/9635343.html