jQuery DateRangePicker

jQuery DateRangePicker 是一个用于选择时间范围的 jQuery 插件。它可以轻松地为网页添加一个用户友好的时间选择器，适用于需要选择起始日期和结束日期的交互场景。

特性

• 使用简单，只需几行代码即可实现时间范围选择功能
• 用户界面友好，可以自定义样式以适应你的网页风格
• 支持多种日期格式和本地化选项
• 可以根据指定的日期范围限制用户的选择
• 支持通过回调函数处理选择的日期范围
• 可以灵活地设置日期格式、年份区间、最小和最大日期等

安装

你可以通过以下方式来安装和使用 DateRangePicker：

1. 通过 npm 安装：

npm install daterangepicker

2. 通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.css" />

使用示例

以下示例演示了如何使用 DateRangePicker：

// 在 HTML 中创建一个用于显示日期范围的输入框
<input type="text" id="dateRangeInput" />

// 在 JavaScript 中初始化 DateRangePicker
$('#dateRangeInput').daterangepicker({
    startDate: moment().startOf('month'), // 设置默认开始日期为本月的第一天
    endDate: moment().endOf('month'), // 设置默认结束日期为本月的最后一天
    locale: {
        format: 'YYYY-MM-DD', // 设置日期格式
        separator: ' 至 ', // 设置日期分隔符
        applyLabel: '确定', // 设置应用按钮文本
        cancelLabel: '取消', // 设置取消按钮文本
        fromLabel: '从', // 设置起始日期文本
        toLabel: '至', // 设置结束日期文本
        customRangeLabel: '自定义', // 设置自定义范围按钮文本
        weekLabel: 'W', // 设置星期文本
        daysOfWeek: moment.weekdaysMin(), // 设置星期缩写
        monthNames: moment.monthsShort() // 设置月份缩写
    },
    minDate: moment().startOf('year'), // 设置最小日期
    maxDate: moment().endOf('year') // 设置最大日期
}, function(start, end, label) {
    console.log('选择的日期范围为: ' + start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD'));
});

更多信息和选项

有关 DateRangePicker 更多的选项和用法，请参考官方文档：DateRangePicker Documentation