可单选可进行范围选择的日历——daterangepicker的改动

原创已于 2022-06-03 14:50:36 修改 · 2.6k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #html #datepicker

于 2022-01-13 11:59:53 首次发布

前端零零散散专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何将Date Range Picker组件改造成既能单选日期又能范围选择的功能。通过汉化、隐藏第二个日历、修改JS逻辑，实现了单选时点击“确定”按钮有效并赋值，同时解决了用户误以为高亮显示的当天已被选择的问题。最后展示了完成改造后的HTML页面代码。

Date Range Picker是用于选择日期范围，日期和时间的JavaScript组件。

文章目录

我的需求

我的需求是点击某按钮出现一个日历，该日历可单选可多选，根据选择的日期筛选日期范围内的数据。

最后做出来的效果如下图：

单选
多选

Date Range Picker的使用和改动过程

1 确定需要的选择器

在这里插入图片描述
选择上图这款带回调的简单日期范围选择器，具体使用过程见官网。

2 汉化等操作

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日历插件</title>
    <!-- daterangepicker -->
    <script type="text/javascript" src="./jquery.min.js"></script>
    <script type="text/javascript" src="./moment.min.js"></script>
    <script type="text/javascript" src="./daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="./daterangepicker.css" />

    <!-- 引入vue -->
    <script src="./vue.js"></script>
</head>


<body>

    <div id="app">
        <div id="date-picker">点击进行日期选择</div>
    </div>


    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                start_time:'',
                end_time:'',
            },
            methods: {
                bind() {

                    var that = this;
                    
                    $(document).ready(function () {

                        $('#date-picker').daterangepicker({

                            "todayHighlight": false,

                            "showDropdowns": true,

                            "minYear": 2018,

                            "maxYear": 2030,

                            "opens": "right",

                            "drops": "down",


                            locale: {

                                "format": "YYYY/MM/DD",

                                applyLabel: '确定',

                                cancelLabel: '取消',

                                fromLabel: '起始时间',

                                toLabel: '结束时间',

                                daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],

                                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月', '十月', '十一月', '十二月'
                                ],

                                firstDay: 6

                            }

                        }, function (start, end, label) {

                            //此处可定义回调方法

                            that.start_time = start.format('YYYY-MM-DD')

                            that.end_time = end.format('YYYY-MM-DD')

                            console.log(" that.start_time ",  that.start_time );

                            console.log(" that.end_time ",  that.end_time );

                        });
                    });
                }
            },
            created: function () {

                this.bind();

            }
        });
    </script>


</body>

</html>

3 将其中一个日历隐藏掉

在这里插入图片描述

注意：将第二个日历隐藏掉，隐藏后剩下的第一个日历需要添加“下一页”的箭头。

具体步骤：

在daterangepicker.css中找到.drp-calendar.right，给它加上display:none;
在daterangepicker.js中删除如下图所示的语句

4 使该范围选择日历同时支持单选

在这里插入图片描述
此时日历已经可以实现在一个日历上进行范围选择，但单选时“确定”按钮是不可用的。

解决方法：在daterangepicker.js中添加如下图所示的语句
在这里插入图片描述

5 选择单个日期点击“确定”后给endDate赋值

经过以上操作后，表面上可以实现在一个日历上同时进行范围选择和单个日期选择，但实际上只选择一个日期时，是没有任何作用的，不会console.log出当前选择的startDate和endDate。

解决方法：在daterangepicker.js中添加如下图所示的语句
在这里插入图片描述
修改后，后台console.log的结果：

6 完善

完成上面的这些步骤，已经可以满足基本的使用需求了。
但还有一个问题：日历上会高亮当天的日期，如果用户是想选择当天的日期，但是看到高亮后就认为已经选择了当天，就点击了“确定”按钮，而事实上是没有默认选择当天的。
后台不会console.log任何数据。
在这里插入图片描述
一开始我试图在daterangepicker.js中修改，但是由于日期格式的问题，修改变得非常麻烦，便放弃了修改原js文件的想法，转为修改我自己页面的代码。

思路：在调用函数时，如果startDate和endDate为空，则给data中的start_time和end_time赋值为今天的日期。

终于完成啦~
最终html页面代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日历插件</title>
    <!-- daterangepicker -->
    <script type="text/javascript" src="./jquery.min.js"></script>
    <script type="text/javascript" src="./moment.min.js"></script>
    <script type="text/javascript" src="./daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="./daterangepicker.css" />

    <!-- 引入vue -->
    <script src="./vue.js"></script>
</head>


<body>

    <div id="app">
        <div id="date-picker"  @click="date()">点击进行日期选择</div>
    </div>


    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                start_time: '',
                end_time: '',
            },
            methods: {
                bind() {

                    var that = this;

                    $(document).ready(function () {

                        $('#date-picker').daterangepicker({

                            "todayHighlight": false,

                            "showDropdowns": true,

                            "minYear": 2018,

                            "maxYear": 2030,

                            "opens": "right",

                            "drops": "down",


                            locale: {

                                "format": "YYYY/MM/DD",

                                applyLabel: '确定',

                                cancelLabel: '取消',

                                fromLabel: '起始时间',

                                toLabel: '结束时间',

                                daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],

                                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月', '十月', '十一月', '十二月'
                                ],

                                firstDay: 6

                            }

                        }, function (start, end, label) {

                            //此处可定义回调方法

                            that.start_time = start.format('YYYY-MM-DD')

                            that.end_time = end.format('YYYY-MM-DD')

                        });
                    });
                },


                // 选择日期范围后
                date() {

                    var that = this;

                    $('#date-picker').on('apply.daterangepicker', function (ev, picker) {

                        if (!that.start_time && !that.end_time) {

                            var formatDate = function (date) {
                                var y = date.getFullYear();
                                var m = date.getMonth() + 1;
                                m = m < 10 ? '0' + m : m;
                                var d = date.getDate();
                                d = d < 10 ? ('0' + d) : d;
                                return y + '-' + m + '-' + d;
                            };

                            today = formatDate(new Date());

                            that.start_time = today;

                            that.end_time = today;

                        }

                        console.log(" that.start_time ", that.start_time);

                        console.log(" that.end_time ", that.end_time);

                        that.postRquire();

                    })

                },

                postRquire(){
                    // ajax请求
                },

            },
            created: function () {

                this.bind();

            }
        });
    </script>


</body>

</html>