Datepicker onSelect格式化新的日期范围

Question

我有2个日期选择器，一个是fromDate，一个是toDate。我可以在beforeShowDay（）中成功突出显示fromDate到toDate的范围，但我需要它突出显示何时选择新值。这会触发onSelect语句。有没有办法：

1）再次触发beforeShowDay？或

2）获取新范围的所有日期并将css类应用于它们？

 beforeShowDay: function(date){
                        if (date >= initialFromDate && date <= initialToDate) {
                            return [true, 'ui-individual-date', ''];
                        }
                        else {
                            return [true, '', ''];
                        }
                    },
 onSelect: function (dateText, obj) {

                        var fromDate = new Date(dateText);
                        var toDate = $(".dateDiv2").datepicker('getDate');

     **get individual dates? 
       if (individualdate >= fromDate && individualDate <= toDate)
       apply css class or formatting to individualDate**

},

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的突出显示。

Answer 2

Link on jsFiddle

HTML：

<div id="dateFrom"></div>  
<div id="dateTo"></div>  

CSS：

div#dateFrom, div#dateTo { display: inline-block; }  
.ui-individual-date { background: yellow; }  

JS：

$( function() {
    $( "#dateFrom, #dateTo" ).datepicker( {
        beforeShowDay: function( date ){
            var initialFromDate, initialToDate;
            initialFromDate = $("#dateFrom").datepicker('getDate');
            initialToDate = $("#dateTo").datepicker('getDate');
            if ( date >= initialFromDate && date <= initialToDate ) {
                return [ true, 'ui-individual-date', '' ];
            } else {
                return [ true, '', '' ];
            }
        },
        onSelect: function ( dateText, obj ) {
            $( "#dateFrom" ).datepicker( "refresh" );
            $( "#dateTo" ).datepicker( "refresh" );
        }
    } );
} );

就在显示日期之前将initialFromDate和initialToDate更改为$("#dateFrom").datepicker('getDate')和$("#dateTo").datepicker('getDate')。
在onSelect中使用$( "#dateFrom" ).datepicker( "refresh" );和$( "#dateTo" ).datepicker( "refresh" );。