Question

我试图在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.length;i++){
        if(dateArray[i].valueOf()===thedate.valueOf()){
            return [false,"cssClass","title"];
        }else return [true,""]
    }
})

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

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

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

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"); 
      },

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

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

2 个答案: