在jQuery Datepicker中选择日期范围和突出显示

我试图在jQuery Datepicker中突出显示或更改一系列日期的CSS。 我希望用户能够单击开始日期和结束日期，并且还要突出显示该范围之间的所有日期。 我点击时能够在该范围内创建一个日期数组，但由于某种原因，我无法添加一个类来更改CSS。

我如何才能获取该日期数组，然后为它们添加一个CSS类以更改背景/突出显示？

任何帮助将不胜感激！

谢谢

Answer 1

好的，假设您已经在数组中有用户选择的日期。 您可以使用’beforeShowDay’选项指定将在当前可见月份中迭代每一天的函数，然后您的函数可以将每个日期与您的数组进行比较，并在匹配时应用css类。

所以例如初始化datepicker就像这样……

jQuery(".cal").datepicker({ beforeShowDay: checkDates }) 

函数checkDates（）看起来像这样（假设你的数组被称为dateArray ….

 function checkDates(theDate){ for(i=0;i 

如果日期包含在dateArray中，这将把类'cssClass'应用于日期

return语句中的true / false位确定日期是否可选，标记为“title”的位是html title属性（工具提示）

铌。 这会将日期与最近的毫秒进行比较，因此您可能希望将其修改为仅匹配天数

Answer 2

我已经成功地使用了一个日期选择器来获取日期和一个日期选择器，所以我为一个日期选择器修改了它。 这是代码：

  $(function () { var today = new Date(); var thisYear = (today).getFullYear(); var fromDate = '1/1/2000' //this is the initial from date to set the datepicker range var toDate = '1/7/2000' // this is the initial to date to set the datepicker range //... initialize datepicker.... }, beforeShowDay: function(date){ //if the date is in range if (date >= fromDate && date <= toDate) { return [true, 'ui-individual-date', '']; //applies a css class to the range } else { return [true, '', '']; } }, onSelect: function (dateText, obj) { //sets the new range to be loaded on refresh call, assumes last click is the toDate fromDate = toDate; toDate = new Date(dateText); $(".classDp1").datepicker("refresh"); $(".classDp2").datepicker("refresh"); }, 

每次刷新beforeShowDay函数时都会调用new fromDate和toDate范围。 将变量置于函数外部并在其中进行修改，可以在每次单击时应用css的突出显示。