Datepicker on选择以格式化新的日期范围 [英] Datepicker onSelect to format new date range

问题描述

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

},

解决方案

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" );
        }
    } );
} );

仅在ShowShowDay之前将initialFromDate和initialToDate更改为$("#dateFrom").datepicker('getDate')和$("#dateTo").datepicker('getDate').
在onSelect中使用$( "#dateFrom" ).datepicker( "refresh" );和$( "#dateTo" ).datepicker( "refresh" );.

I have 2 datepickers, one is a fromDate and one is a toDate. I can highlight the range from the fromDate to the toDate successfully in beforeShowDay(), but I need it to highlight when new values are selected. This triggers the onSelect statement. Is there a way to either:

1) trigger the beforeShowDay again? or

2) get all the dates of the new range and apply a css class to them?

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

},

解决方案

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" );
        }
    } );
} );

Just in beforeShowDay change initialFromDate and initialToDate to $("#dateFrom").datepicker('getDate') and $("#dateTo").datepicker('getDate').
And in onSelect use $( "#dateFrom" ).datepicker( "refresh" ); and $( "#dateTo" ).datepicker( "refresh" );.

这篇关于Datepicker on选择以格式化新的日期范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！