推荐一款强大的jQuery日期范围选择插件——jQuery Date Range Picker

作者：System 时间：2024年08月21日分类：所有,jquery 字数：1157

这篇文章距离上次修改已过261天，其中的内容可能已经有所变动。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Date Range Picker 示例</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/momentjs/2.29.1/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
</head>
<body>

<div class="reportrange">
    <i class="fa fa-calendar"></i>&nbsp;
    <span></span>
    <b class="caret"></b>
</div>

<script>
    $(document).ready(function() {
        $('.reportrange').daterangepicker({
            startDate: moment().startOf('day'),
            endDate: moment().endOf('day'),
            locale: {
                format: 'YYYY-MM-DD'
            }
        }, function(start, end) {
            $('#reportrange span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
        });
    });
</script>

</body>
</html>

这段代码展示了如何在网页中引入并使用daterangepicker插件来选择日期范围。它使用了moment.js来处理日期，并提供了一个简洁直观的用户界面供用户选择日期范围。

推荐一款强大的jQuery日期范围选择插件——jQuery Date Range Picker

评论已关闭

推荐阅读