选择日期范围并在jQuery Datepicker中突出显示 [英] Select a Range of dates and Highlight in jQuery Datepicker

问题描述

我正在尝试突出显示或更改jQuery Datepicker中日期范围的CSS.我希望用户能够单击开始日期和结束日期，并突出显示该范围之间的所有日期.单击后，我能够在该范围内创建日期数组，但是由于某些原因，我无法向其添加类来更改CSS.

I am trying to highlight or change the CSS of a range of dates in jQuery Datepicker. I want the user to be able to click the start date and the end date, and have all dates between that range be highlighted as well. I was able to create an array of the dates in that range when clicked, but for some reason I can't add a class to it to change the CSS.

如何获取日期数组，然后向它们全部添加CSS类以更改背景/突出显示?

How could I take that array of dates and then add a CSS class to them all to change the background/highlight?

任何帮助将不胜感激！

谢谢

推荐答案

我已经成功地完成了此任务，其中一个datepicker用于一个起始日期，一个datepicker用于一个截止日期，因此我将其修改为一个datepicker.这是代码:

I have done this successfully with a datepicker for a from date and a datepicker for a to date, so I modified it for one datepicker. Here is the code:

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

Every time you refresh the beforeShowDay function is called with the new fromDate and toDate range. Having the variables outside the function and modifying them within enables the highlighting from the css to be applied on each click.

这篇关于选择日期范围并在jQuery Datepicker中突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！