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

JQuery: Datepicker Highlighting a date Range

本文关键字：日期 范围 选择器 显示 JQuery      更新时间：2023-09-26

我正在一个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和单位（相关单位）

在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, ''];  
                }
           }          
      }

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

非常感谢您的阅读！

我已经成功地使用了一个开始日期的日期选择器和一个结束日期的日期拾取器，所以我将其修改为一个日期选择器。这是代码：

 $(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中的高亮显示。

相关文章：