JQuery：日期选择器突出显示日期范围答案

【问题标题】：JQuery: Datepicker Highlighting a date RangeJQuery：日期选择器突出显示日期范围
【发布时间】：2012-03-19 19:38:43
【问题描述】：

我正在我的一个 jsps 上使用 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, ''];  
                }
           }          
      }

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

非常感谢阅读！

【问题讨论】：

您在选择范围或使用值时遇到问题？
哦，感谢您的评论！好吧，我的问题是即使我有一个范围（提醒的开始和结束日期），并且我试图在日历上突出显示中间的日子，它只会突出显示今天，而不是我问过的日期范围它在 highlightDays 函数中突出显示
嗨，你在寻找这样的东西吗：jsbin.com/evudo，干杯
stephencelis.github.com/timeframe/#example_information
酷，让我们知道进展如何，干杯

标签： java javascript jquery jquery-ui struts

【解决方案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"); 
  },

每次刷新 beforeShowDay 函数时都会使用新的 fromDate 和 toDate 范围调用。将变量放在函数之外并在其中修改它们可以在每次单击时应用 css 的突出显示。

【讨论】：