当前位置：首页 > 行业动态 > 正文

daterangepicker cdn

daterangepicker cdn: https:// cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js

一、引入方式

1、使用CDN引入

Bootstrap Date Range Picker：可以通过CDN方式快速引入，从[jsDelivr](https://cdn.jsdelivr.net/npm/daterangepicker)或[BootCDN](https://lib.baomitu.com/jquery-bootgrid/3.2.1/css/daterangepicker.min.css)等网站获取相关文件，具体代码如下：

CSS文件：在<head>标签中添加以下代码，引入样式表。

 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">

JavaScript文件：在<body>标签底部添加以下代码，引入脚本。

 <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

2、本地引入：如果不想使用CDN，也可以将daterangepicker的相关文件下载到本地服务器，然后在页面中通过相对路径或绝对路径引入这些文件。

daterangepicker cdn

二、基本使用示例

1、HTML结构：创建一个文本输入框，用于显示和选择日期范围。

<input type="text" id="daterange" class="form-control">

2、初始化插件：使用jQuery选择器选中输入框，并调用daterangepicker()方法进行初始化。

$(document).ready(function() {
    $('#daterange').daterangepicker();
});

3、配置选项：daterangepicker提供了丰富的配置选项，可以根据需求进行自定义，设置语言、日期格式、开始日期、结束日期等。

daterangepicker cdn

$(document).ready(function() {
    $('#daterange').daterangepicker({
        locale: {
            format: 'YYYY-MM-DD',
            applyLabel: '确定',
            cancelLabel: '取消',
            fromLabel: '起始时间',
            toLabel: '结束时间',
            customRangeLabel: '自定义',
            daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            firstDay: 1
        },
        startDate: '2024-01-01',
        endDate: '2024-12-31'
    });
});

三、事件处理

1、show.daterangepicker：当日期范围选择器显示时触发，可以在这个事件中执行一些初始化操作，如设置默认值、禁用某些日期等。

$('#daterange').on('show.daterangepicker', function(ev, picker) {
    console.log('日期范围选择器显示');
});

2、hide.daterangepicker：当日期范围选择器隐藏时触发，可以在这个事件中执行一些收尾工作，如验证用户输入、更新页面数据等。

$('#daterange').on('hide.daterangepicker', function(ev, picker) {
    console.log('日期范围选择器隐藏');
});

3、apply.daterangepicker：当用户点击“确定”按钮时触发，可以在这个事件中获取用户选择的日期范围，并进行相应的处理。

daterangepicker cdn

$('#daterange').on('apply.daterangepicker', function(ev, picker) {
    var startDate = picker.startDate;
    var endDate = picker.endDate;
    console.log('用户选择的日期范围：' + startDate.format('YYYY-MM-DD') + ' 到 ' + endDate.format('YYYY-MM-DD'));
});
4、cancel.daterangepicker：当用户点击“取消”按钮时触发，可以在这个事件中执行一些取消操作，如恢复默认值、清空输入框等。

$(‘#daterange’).on(‘cancel.daterangepicker’, function(ev, picker) {

console.log(‘用户取消了日期范围选择’);

});

四、常见问题及解决方法
1、日期格式不正确：确保在配置选项中正确设置了日期格式，并且与后端接收的日期格式一致，如果日期格式不正确，可能会导致数据显示异常或无法正常提交表单。
2、无法选择日期范围：检查是否正确引入了相关的依赖库（如Moment.js），以及是否正确设置了startDate和endDate等配置选项，如果依赖库缺失或配置错误，可能会导致无法正常选择日期范围。
3、样式显示异常：可能是由于CSS文件没有正确引入或与其他样式冲突所致，可以尝试清除浏览器缓存或检查CSS代码是否存在问题。
4、事件不触发：确保正确地绑定了事件处理函数，并且事件名称拼写正确，如果事件仍然无法触发，可以在控制台中输出调试信息，以便找出问题所在。
五、相关链接和资源
1、[官方网站](https://www.daterangepicker.com/)：提供了详细的文档说明、示例代码和下载链接。
2、[GitHub仓库](https://github.com/dangrossman/daterangepicker)：可以查看源代码、提交问题和参与讨论。
3、[Bootstrap Date Range Picker中文网](https://blog.csdn.net/weixin_52720069/article/details/129478746)：包含了更多的使用示例和中文教程。
daterangepicker cdn

相关文章