取消时重置daterangepicker.js日期值

基础概念

daterangepicker.js 是一个用于在网页上显示日期选择范围的 JavaScript 库。它允许用户选择一个日期范围，并提供了丰富的配置选项来定制日期选择器的样式和行为。

类型

daterangepicker.js 主要支持以下几种类型的日期选择：

单日选择
日期范围选择
多日期选择

应用场景

日历应用
项目管理工具
数据分析平台
任何需要日期选择的网页应用

取消时重置日期值

当用户取消日期选择时，通常希望将日期选择器的值重置为初始状态。以下是如何实现这一功能的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Daterangepicker Example</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
</head>
<body>
    <input type="text" id="daterangepicker" />

    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script>
        $(document).ready(function() {
            var initialDate = new Date();

            $('#daterangepicker').daterangepicker({
                startDate: initialDate,
                endDate: initialDate,
                autoApply: false,
                locale: {
                    cancelLabel: 'Reset'
                }
            });

            $('#daterangepicker').on('cancel.daterangepicker', function(ev, picker) {
                picker.startDate = initialDate;
                picker.endDate = initialDate;
                picker.update();
            });
        });
    </script>
</body>
</html>

解释

初始化日期选择器：使用 $('#daterangepicker').daterangepicker() 初始化日期选择器，并设置初始日期。
监听取消事件：使用 $('#daterangepicker').on('cancel.daterangepicker', function(ev, picker) {...}) 监听取消事件。
重置日期值：在取消事件的处理函数中，将 picker.startDate 和 picker.endDate 设置为初始日期，并调用 picker.update() 更新日期选择器的显示。