jQuery datepicker 是一個(gè)常用的 JavaScript 日歷插件，可以方便的實(shí)現(xiàn)日期選擇功能。而它的多選功能更是為許多網(wǎng)站提供了非常方便的實(shí)現(xiàn)方式。下面介紹一下如何使用 jQuery datepicker 來實(shí)現(xiàn)多選功能。

首先，在引入 jQuery 以及 datepicker 的 js 和 css 文件之后，需要對(duì) datepicker 進(jìn)行一些參數(shù)配置，以支持多選功能。具體代碼如下：

$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(dateText) {
//獲取選中的日期
var dates = $(this).datepicker('getDate');
//用數(shù)組記錄選中的日期
var dateArray = [];
for (var i = 0; i< dates.length; i++) {
var date = dates[i];
var ymd = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
dateArray.push(ymd);
}
//將選中的日期設(shè)置為隱藏域的值
$('#hiddenDate').val(dateArray.join(','));
},
beforeShowDay: function(date) {
//判斷該日期是否已選中
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
if ($.inArray(dateString, $('#hiddenDate').val().split(',')) != -1) {
return [true, "highlight"]
} else {
return [true, ""];
}
}
});

代碼中關(guān)鍵的部分是在參數(shù) onSelect 的回調(diào)函數(shù)中，根據(jù)選中的日期生成一個(gè)數(shù)組，并將其設(shè)置為隱藏域的值。beforeShowDay 用于判斷日期是否已經(jīng)選中，如果選中了，則應(yīng)用“highlight”類。

最后，將 datepicker 綁定到對(duì)應(yīng)的 input 元素即可，如下所示：

<input type="text" id="datepicker" />
<input type="hidden" id="hiddenDate" />

以上就是使用 jQuery datepicker 實(shí)現(xiàn)多選功能的完整代碼。通過這種方式，我們可以方便的實(shí)現(xiàn)日期的多選功能，非常適用于需要選擇一段日期范圍的網(wǎng)站。