Datepicker onSelect 格式化新的日期范围答案

【问题标题】：Datepicker onSelect to format new date rangeDatepicker onSelect 格式化新的日期范围
【发布时间】：2015-03-16 19:35:38
【问题描述】：

我有 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**

},

【问题讨论】：

在 onSelect 语句末尾使用日期选择器刷新不起作用。
你能在 jsfiddle 中设置这个吗？
jsfiddle 的内容太多了
我试过了，但在 jsfiddle 中看起来不正确。它在浏览器中看起来和工作正常。
在beforeShowDay 中将initialFromDate 和initialToDate 更改为$(".fromDateSelector").datepicker('getDate') 和$(".toDateSelector").datepicker('getDate')。原因首先检查此值是否存在。在onSelect 中只有$( ".fromDateSelector" ).datepicker( "refresh" ); 和$( ".toDateSelector" ).datepicker( "refresh" );。无需使用全局变量，您可以简单地获取选定的日期并刷新日期选择器。

标签： javascript jquery css datepicker jquery-ui-datepicker

【解决方案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 的突出显示。

【讨论】：

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

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

【讨论】：