jQuery date range picker（daterangepicker）是一個jQuery插件，用于在網(wǎng)頁中方便地選擇日期范圍。

daterangepicker需要在網(wǎng)頁中導(dǎo)入jQuery庫和daterangepicker插件，可以使用以下代碼進(jìn)行導(dǎo)入：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css"  />

daterangepicker具有多種選項，可以按照自己的需求進(jìn)行配置，例如可以設(shè)置初始時間范圍、最小/最大可選日期、日期格式、本地化等。下面是一個簡單的例子：

<input type="text" id="daterange" />
<script>
$(function() {
$('#daterange').daterangepicker({
"startDate": "2021-01-01",
"endDate": "2021-12-31",
"minDate": "2021-01-01",
"maxDate": "2022-12-31",
"locale": {
"format": "YYYY/MM/DD",
"separator": " - ",
"applyLabel": "確認(rèn)",
"cancelLabel": "取消",
"fromLabel": "開始時間",
"toLabel": "結(jié)束時間",
"customRangeLabel": "自定義",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月"
]
}
});
});
</script>

在上面的例子中，我們創(chuàng)建了一個輸入框，使用jQuery選擇器將其綁定到daterangepicker插件。使用startDate和endDate選項設(shè)置默認(rèn)的日期范圍，使用minDate和maxDate選項限制可選的日期。使用locale選項設(shè)置日期格式和本地化。

使用daterangepicker插件可以方便地選擇日期范圍，而且樣式美觀，高度可定制化。在需要時間范圍選擇的場景中應(yīng)用daterangepicker插件可以提高用戶的體驗。