时间选择器组件 -- daterangepicker

1. 官方网站

https://www.daterangepicker.com/

2. 下载

3. 效果展示

4. 引入

4.1 添加到项目中

4.2 HTML 引入

1. 引入css

{% load static %}
<link rel="stylesheet" href="{%  static 'plugin/daterangepicker/daterangepicker.css' %}">

2. 引入js

<script src="{% static 'plugin/daterangepicker/moment.min.js' %}"></script>   <!-- 必须先引入 moment.min.js -->
<script src="{% static 'plugin/daterangepicker/daterangepicker.js' %}"></script>

3. 创建标签

<body>
    <div class="container-fluid" style="margin-top: 20px">
        <div>
            <div class="input-group" style="width: 300px">
                <span class="input-group-addon">日期范围</span>
                <input id="rangePicker" class="form-control" type="text">
            </div>
        </div>
    </div>
</body>

5. 应用

5.1 配置

<script>
    $(function () {
        initDateRangePicker()
    });

    function initDateRangePicker() {
        $('#rangePicker').daterangepicker({
            // 配置 daterangepicker   
            maxDate: moment(),   
            alwaysShowCalendars: true,  // 永久展示右边的日期部分
            showWeekNumbers: true,  	// 永久展示星期
            ranges: {   // 自定义的左侧常用选项
                "今天": [moment(), moment()],
                "昨天": [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                "最近7天": [moment().subtract(6, 'days'), moment().subtract(6, 'days')],
                "最近30天": [moment().subtract(29, 'days'), moment().subtract(29, 'days')],
                "本月": [moment().startOf("month"), moment().endOf("month")],
            },
            locale: {  // 汉化配置
                format: 'YYY-MM-DD',
                separator: ' 至 ',
                applyLabel: '确定',
                cancelLabel: '取消',
                fromLabel: '开始',
                toLabel: '结束',
                customRangeLabel: '自定义',
                weekLabel: 'W',
                daysOfWeek: ["一", "二", "三", "四", "五", "六", "日"],
                monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                firstDay: 1
            }
        },function (start, end, label) {
            // 选择了时间之后,会触发这个函数
            // start 选择的开始时间
            // end 选择的结束时间
            // label
            console.log(start.format("YYYY-MM-DD"), end.add(1, 'days').format("YYYY-MM-DD"))
        });
    }
</script>
posted @ 2024-01-01 21:53  河图s  阅读(367)  评论(0)    收藏  举报