JQuery:Datepicker突出显示日期范围

时间:2012-03-19 19:38:44

标签: java javascript jquery jquery-ui struts

我在我的一个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, ''];  
                }
           }          
      }

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

非常感谢您的阅读!

1 个答案:

答案 0 :(得分: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"); 
  },

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