java - JQuery:日期选择器突出显示日期范围

Question

我正在我的一个 jsp 上使用 JQuery 1.7 Datepicker 编写一个 Struts Web 应用程序，以便实现一个可以为用户突出显示提醒的日历。

我有一个问题:

我想在日期选择器中突出显示日期范围。使用我的代码，Javascript 控制台没有显示任何错误，但在我登录时日期范围没有突出显示。这是我的功能:

$(function(){

            $('#datepicker').datepicker({
                flat: true,
                numberOfMonths: [1,1],
                dateFormat: 'dd/mm/yy',
                beforeShowDay: highlightDays
            });

我有一个提醒数组，每个提醒有3个属性，startDate、endDate和unit(关联单元)

在 beforeShowDay 事件中，函数 highlightDays 被激活:

function highlightDays(date) {

     //For all reminders in the db
   for (var i = 0; i < reminders.length; i++) { 

    //If the current date in between the start and end date of reminder
      if( (new Date(reminders[i].start).getTime())  
                       <= date.getTime()                            
                      &&  (date.getTime())                           
                       <= (new Date(reminders[i].end).getTime()))  date
                { 
                  //Then highlight the current date             
                   return [true, 'ui-state-highlight',reminders[i].unit];

                }else{   //Otherwise do not highlight                          
                   return [true, ''];  
                }
           }          
      }

你知道我可能做错了什么吗？到目前为止我所实现的对我来说很有意义，所以我不确定会出现什么问题。我真的很感激一些指导!

非常感谢阅读!

Answer 1

我已经成功地使用了一个日期选择器作为起始日期，一个日期选择器作为一个日期选择器，所以我为一个日期选择器修改了它。这是代码:

 $(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 的突出显示应用于每次单击。