bootstrap中daterangepicker组件的使用(一)

电玩女神 2022-04-14 03:30 222阅读 0赞

这段时间接了一个需求,需要实现打开一个日期控件,需要选择一个日期范围:

需求是这样:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmcxODAyMDI4OTE1_size_16_color_FFFFFF_t_70][]

如上图所示,点击上一周期,弹出上图的一个日期控件,默认是一个范围,并且这个范围的开始日期和结束日期和长度都要根据外界的两个条件进行动态变化.

我引入了bootstrap中的一个daterangepicker组件来实现这个功能,首先我写了一个demo,如下:

一.Demo如下:

首先我的项目结构如下所示:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmcxODAyMDI4OTE1_size_16_color_FFFFFF_t_70 1][]

首先来看daterangerpicker01.html 这个页面:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>daterangerpicker小demo</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/daterangepicker.css">
        <script src="js/jquery-2.2.3.min.js"></script>
        <script src="js/moment.js"></script>
        <script src="js/daterangepicker.js"></script>
        <script type="text/javascript">
    
            $(function () {
                //单个时间插件
                $("input[name='date1']").daterangepicker(
                    {
                        singleDatePicker: true,//设置为单个的datepicker，而不是有区间的datepicker 默认false
                        showDropdowns: true,//当设置值为true的时候，允许年份和月份通过下拉框的形式选择 默认false
                        autoUpdateInput: false,//1.当设置为false的时候,不给与默认值(当前时间)2.选择时间时,失去鼠标焦点,不会给与默认值 默认true
                        timePicker24Hour : true,//设置小时为24小时制 默认false
                        timePicker : false,//可选中时分 默认false
                        locale: {
                            format: "YYYY-MM-DD",
                            separator: " - ",
                            daysOfWeek: ["日","一","二","三","四","五","六"],
                            monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
                        }
    
                    }
                ).on('cancel.daterangepicker', function(ev, picker) {
                    $("#date1").val("请选择日期");
                    $("#submitDate").val("");
                }).on('apply.daterangepicker', function(ev, picker) {
                    $("#submitDate").val(picker.startDate.format('YYYY-MM-DD'));
                    $("#date1").val(picker.startDate.format('YYYY-MM-DD'));
                });
    
                //区间时间插件
                $("input[name='date2']").daterangepicker(
                    {
                        // autoApply: true,
                        autoUpdateInput: false,
                        // alwaysShowCalendars: true,
                        ranges: {
                            '今天': [moment(),moment()],
                            '昨天': [moment().subtract(1, 'days'),moment().subtract(1, 'days')],
                            '近7天': [moment().subtract(7, 'days'), moment()],
                            '这个月': [moment().startOf('month'), moment().endOf('month')],
                            '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                        },
                        locale: {
                            format: "YYYY/MM/DD HH:MM:SS",
                            separator: " - ",
                            applyLabel: "确认",
                            cancelLabel: "清空",
                            fromLabel: "开始时间",
                            toLabel: "结束时间",
                            customRangeLabel: "自定义",
                            daysOfWeek: ["日","一","二","三","四","五","六"],
                            monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
                        }
                    }
                ).on('cancel.daterangepicker', function(ev, picker) {
                    $("#date2").val("请选择日期范围");
                    $("#startTime").val("");
                    $("#endTime").val("");
                }).on('apply.daterangepicker', function(ev, picker) {
                    $("#startTime").val(picker.startDate.format('YYYY-MM-DD'));
                    $("#endTime").val(picker.endDate.format('YYYY-MM-DD'));
                    $("#date2").val(picker.startDate.format('YYYY-MM-DD')+" 至 "+picker.endDate.format('YYYY-MM-DD'));
                });
    
            });
        </script>
    </head>
    <body>
        <div>
            我是一个DateRangePicker的小练习
        </div>
        <div class="form-group">
            <label>单个</label>
            <div>
                <input type="text" name="date1" id="date1" class="form-control" style="width: 20%;">
                <input type="hidden" id = "submitDate" name="submitDate" class="form-control" />
            </div>
        </div>
    
        <div class="form-group">
            <label>区间</label>
            <div>
                <input type="text" name="date2" id="date2" class="form-control" style="width: 20%;">
                <input type="hidden" id = "startTime" name="startTime" class="form-control" />
                <input type="hidden" id = "endTime" name="endTime" class="form-control" />
            </div>
        </div>
    </body>
    </html>

首先引入了一些css和js

按照html中的引入,还要用到jquery,因为这个组件是基于bootstrap的,所以要先引入bootstrap的css文件和js文件.

从上面html中可以看到,这个demo包含两块,一块是单个日期控件的使用,另外一个是区间范围的使用.  
单个日期控件如下图所示:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmcxODAyMDI4OTE1_size_16_color_FFFFFF_t_70 2][]

区间日期范围如下所示:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmcxODAyMDI4OTE1_size_16_color_FFFFFF_t_70 3][]

他可以选择时间范围,也可以自定义,具体可以仔细看一下代码.这个demo还是很简单的,这个demo没有对源码做任何修改.

这个demo我先记到这里.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmcxODAyMDI4OTE1_size_16_color_FFFFFF_t_70]: /images/20220414/9be77c385efe4cafac3f3e9e1c3f79e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmcxODAyMDI4OTE1_size_16_color_FFFFFF_t_70 1]: /images/20220414/73db1341ad0a41348d63fc3236c7ae78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmcxODAyMDI4OTE1_size_16_color_FFFFFF_t_70 2]: /images/20220414/43f31b0cae294ec3bca9a69a0f0c2331.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmcxODAyMDI4OTE1_size_16_color_FFFFFF_t_70 3]: /images/20220414/e9e439fbe9714c7dbbc13ffbf72d5207.png