1

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

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

任何帮助将不胜感激！

谢谢

4

2 回答 2

0

我已经成功地使用了一个用于起始日期的日期选择器和一个用于截止日期的日期选择器，所以我为一个日期选择器修改了它。这是代码：

 $(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 函数时都会使用新的 fromDate 和 toDate 范围调用。将变量放在函数之外并在其中修改它们可以在每次单击时应用 css 的突出显示。

于 2015-03-17T14:46:16.203 回答
0

好的，假设您已经在数组中选择了用户选择的日期。您可以使用“beforeShowDay”选项指定一个函数，该函数将遍历当前可见月份中的每一天，然后您的函数可以将每个日期与您的数组进行比较，并在匹配的地方应用一个 css 类。

所以例如像这样初始化日期选择器......

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

并且函数 checkDates() 看起来像这样（假设您的数组称为 dateArray....

function checkDates(theDate){
    for(i=0;i<dateArray.length;i++){
        if(dateArray[i].valueOf()===thedate.valueOf()){
            return [false,"cssClass","title"];
        }else return [true,""]
    }
})

如果日期包含在 dateArray 中，这会将“cssClass”类应用于日期

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

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

于 2012-08-11T23:34:34.277 回答