bootstrap-datepicker

最新推荐文章于 2025-06-03 09:04:10 发布

原创最新推荐文章于 2025-06-03 09:04:10 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

前端踩坑专栏收录该内容

8 篇文章

订阅专栏

其是bootstrap下的控件，所以要引入bootstrap相关css与js以及jquery，并引入自己的

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

前端html代码

<div class="form-group">
    <label for="{{ item.id_for_label }}" class="col-sm-2 control-label">{{ item.label }}:</label>
    <div class="col-sm-4 input-group date datepicker" style="padding:0 15px 0 15px;">
                {{item}}
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-remove"></span>
        </span>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

3.js调用插件并设置参数

 $(function () {

        $(".datepicker").datetimepicker({
            language: 'zh-CN',
            format: 'yyyy/mm/dd',
            autoclose: true,
            startView: 2,
            todayBtn: true,
            todayHighlight: true,
            minView: 2,
        });

    });