Bootstrap datepicker时间插件

基于bootstrap的日期选择器，只能选择年月日，暂不支持时分秒。

1、下载及初始化&使用文档

https://github.com/uxsolutions/bootstrap-datepicker

https://bootstrap-datepicker.readthedocs.io/en/latest/markup.html

2、使用

a、页面头部引入css文件
<head>
　　 <link rel="shortcut icon" href=" {% static "imgs/luffy-study-logo.png" %}">
　　 <link rel="stylesheet" href="{% static 'plugin/bootstrap/css/bootstrap.min.css' %}">
　　 <link rel="stylesheet" href="{% static 'plugin/font-awesome/css/font-awesome.min.css' %}">
　　 <link rel="stylesheet" href="{% static 'css/manage.css' %}">
    <link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugin/bootstrap-datepicker/css/bootstrap-datepicker.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugin/bootstrap-select/css/bootstrap-select.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugin/select2/css/select2.min.css' %}">
</head>

b、页面底部引入js

{% block content %}{% endblock %}
　　<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
　　<script src="{% static 'plugin/bootstrap/js/bootstrap.min.js' %}"></script>
   <script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
   <script src="{% static 'plugin/bootstrap-datepicker/js/bootstrap-datepicker.min.js' %}"></script>
    <script src="{% static 'plugin/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>
    <script src="{% static 'plugin/bootstrap-select/js/bootstrap-select.min.js' %}"></script>
    <script src="{% static 'plugin/bootstrap-select/js/i18n/defaults-zh_CN.min.js' %}"></script>
    <script src="{% static 'plugin/select2/js/select2.min.js' %}"></script>
    <script src="{% static 'plugin/select2/js/i18n/zh-CN.js' %}"></script>

<script>

$(function () {
        initDatePicker();
    });

    /*
     添加对话框：初始化时间选择方法一datepicker：时间选择当前时间之后
     */
    function initDatePicker() {
        {#            设定时间选择当前时间之后#}
        $('#id_start_date,#id_end_date').datepicker({
            format: 'yyyy-mm-dd',
            startDate: '0',
            language: "zh-CN",
            autoclose: true
        });
    }

    /*
     添加对话框：初始化时间选择方法二each 每天日期可以选择
     */
    function initDatePicker() {
        $('#id_start_date,#id_end_date').each(function () {
            $(this).datepicker({
                language: 'zh-CN', //语言
                autoclose: true, //选择后自动关闭
                clearBtn: true,//清除按钮
                todayBtn: true, //今日按钮
                format: "yyyy-mm-dd",//日期格式
                todayHighlight: true, //今天高亮
                startView: 0, //选择器开始界面   0：天（默认）、1：月、2：年、3：十年、4：世纪
                daysOfWeekDisabled: [1],//星期禁用
                daysOfWeekHighlighted: [0, 6], //星期高亮
                calendarWeeks: true, //显示周，默认false
                keyboardNavigation: true,// 键盘使用
                multidate:true,// 多选启用，
                multidateSeparator: ',',//多选分割符

            });
        });

    }

</script>

{% block js %}{% endblock %}

 
备注：设定选定月份

a、页面头部引入css文件

.cs {
    background-color: grey !important;
    color: #fff !important;
}

b、底部引入js脚本

{% block yijijs %}
    <script src="{% static 'keliu/plugin/bootstrap-datepicker/js/bootstrap-datepicker.min.js' %}"></script>
    <script src="{% static 'keliu/plugin/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>

    <script>
        var ops = {
            language: 'zh-CN', //语言
            autoclose: true, //选择后自动关闭
            clearBtn: true,//清除按钮
            format: "yyyy-mm",//日期格式
            startView: 1,//选择月
            minViewMode: 1,
            maxViewMode: 2,
            forceParse: false,
            beforeShowMonth: function (e) {
                //设置1月份也特殊月份，不允许选择
                var d = new Date();
                if (e.getMonth() != d.getTime()) {
                    return {
                        classes: 'cs',
                    }
                }
            }
        };

        $("#id_start_date").datepicker(ops);

    </script>>
    {% block js %}
    {% endblock %}

{% endblock %}

posted on 2020-09-20 18:40 asia90li 阅读(510) 评论(0) 收藏举报