Javascript 悬停时突出显示jQueryUIDatePicker中的daterange

我的jQueryUI日期选择器有点问题。 当我选择开始日期和结束日期（例如2015/12/02-2015/12/08）时，我设法使其突出显示我的日期范围，然后以绿色突出显示两者之间的日期

我现在的问题是-在选择结束日期之前，我可以高亮显示日期范围吗

下面是一个例子：

当我选择开始日期时，它会高亮显示日期范围，直到我选择所需的结束日期。我不确定这是否可以在jQueryUIDatePicker中完成——如果不能，那么我必须找到其他的东西——但在这里值得一试：）

以下是我目前的代码：

$(function() {

var disabledDate = ["13-12-2015", "14-12-2015", "15-12-2015"];

$.datepicker.setDefaults($.datepicker.regional["da"]);

$("#datepicker").datepicker({
        minDate: 0,
        /* numberOfMonths: [4,2], */
        numberOfMonths: 2,
        firstDay: 1,
        inline: true,
        beforeShowDay: function(date) {

            var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
            if(disabledDate.indexOf(string) == -1) {

            } else {
                return[false, 'disabled-dates'];
            };

            var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateFrom").val());
            var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateTo").val());
            return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "selected-dates" : ""];

        },
        onSelect: function(dateText, inst) {

            var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateFrom").val());
            var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateTo").val());

            var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);

            if (!date1 || date2) {

                $("#chooseDateFrom").val(dateText);
                $("#chooseDateTo").val("");

                $(this).datepicker("option", "minDate", dateText);

            } else if( selectedDate < date1 ) {

                $("#chooseDateTo").val( $("#chooseDateFrom").val() );
                $("#chooseDateFrom").val( dateText );

                $(this).datepicker("option", "minDate", dateText);

            } else {

                $("#chooseDateTo").val(dateText);

                $(this).datepicker("option", "minDate", null);

            }
        }
});
});

$（函数（）{
var disabledDate=[“13-12-2015”、“14-12-2015”、“15-12-2015”]；
$.datepicker.setDefaults（$.datepicker.regional[“da]”）；
$（“#日期选择器”）。日期选择器({
minDate:0，
/*月数：[4,2]*/
月数：2，
第一天：1，
是的，
beforeShowDay:功能（日期）{
var string=jQuery.datepicker.formatDate（'dd-mm-yy'，日期）；
if（disabledDate.indexOf（string）=-1）{
}否则{
返回[假，'禁用日期']；
};
var date1=$.datepicker.parseDate（$.datepicker._defaults.dateFormat，$（“#ChooseStateFrom”）.val（））；
var date2=$.datepicker.parseDate（$.datepicker._defaults.dateFormat，$（“#choostateto”）.val（））；
return[true，date1&（（date.getTime（）==date1.getTime（））| |（date2&&date>=date1&&date这将帮助您

$(document).ready(function(){

     var disabledDate = ["13-12-2015", "14-12-2015", "15-12-2015"];

     $("#datepicker").datepicker({
        minDate: 0,
        /* numberOfMonths: [4,2], */
        numberOfMonths: 2,
        firstDay: 1,
        inline: true,
        beforeShowDay: function(date) {

            var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
            if(disabledDate.indexOf(string) == -1) {

            } else {
                return[false, 'disabled-dates'];
            };

            var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateFrom").val());
            var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateTo").val());
            return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "selected-dates" : ""];

        },
  onSelect: function(dateText, inst) {

            var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateFrom").val());
            var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateTo").val());

            var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);

            if (!date1 || date2) {

                $("#chooseDateFrom").val(dateText);
                $("#chooseDateTo").val("");

                $(this).datepicker("option", "minDate", dateText);

            } else if( selectedDate < date1 ) {

                $("#chooseDateTo").val( $("#chooseDateFrom").val() );
                $("#chooseDateFrom").val( dateText );

                $(this).datepicker("option", "minDate", dateText);

            } else {

                $("#chooseDateTo").val(dateText);

                $(this).datepicker("option", "minDate", null);                   

            }
             setTimeout("$('a.ui-state-default').attr('onmouseover','setBackColor(this)');",1000); 
        }
});

$('a.ui-state-default').attr('onmouseover','setBackColor(this)');    

 });
  function setBackColor(object){
    var day1=parseInt($(object).html());
    var month1=parseInt($(object).parents("td").attr("data-month"));
    var year1=parseInt($(object).parents("td").attr("data-year"));
    var date1=new Date(year1,month1, day1);
 //$("#chooseDateFrom").val(date1);
    if(Date.parse(document.getElementById('chooseDateFrom').value)){
    $("a.ui-state-default").each(function(){            
        var obj = this;
        var day=parseInt($(obj).html());
        var month=parseInt($(obj).parents("td").attr("data-month"));
        var year=parseInt($(obj).parents("td").attr("data-year"));
        var date=new Date(year,month, day);
        if(new Date($("#chooseDateFrom").val())<=date && date<=date1){
            $(obj).css("background-color","#78F764");
        }else{
            $(obj).css("background-color",'#e6e6e6');
        }
    });
   }
  }

$（文档）.ready（函数（）{
var disabledDate=[“13-12-2015”、“14-12-2015”、“15-12-2015”]；
$（“#日期选择器”）。日期选择器({
minDate:0，
/*月数：[4,2]*/
月数：2，
第一天：1，
是的，
beforeShowDay:功能（日期）{
var string=jQuery.datepicker.formatDate（'dd-mm-yy'，日期）；
if（disabledDate.indexOf（string）=-1）{
}否则{
返回[假，'禁用日期']；
};
var date1=$.datepicker.parseDate（$.datepicker._defaults.dateFormat，$（“#ChooseStateFrom”）.val（））；
var date2=$.datepicker.parseDate（$.datepicker._defaults.dateFormat，$（“#choostateto”）.val（））；
return[true，date1&（（date.getTime（）==date1.getTime（））| |（date2&&date>=date1&&date嗨，Atikur，我想知道你的评论到哪里去了-但现在我明白了：）我得到了以下错误：“未捕获引用错误：未定义setBackColor”-请看Fiddle：请不要在Fiddle中进行测试。但是直接实现它。我还想知道这在我们的服务器上可以完美地工作，但在Fiddle中不工作。请尝试一下。嗨，Atikur，它在我的网站上也不工作。请看一看……控制台中也没有任何内容。嗨，Atikur-终于！我成功了！错误在我这边：）非常感谢！你帮我省了很多工作：）