悬停时突出显示jQuery UI日期选择器中的日期范围

Highlight daterange in jQuery UI datepicker on hover

本文关键字：日期 选择器 范围 UI jQuery 显示 悬停      更新时间：2023-09-26

我的jQuery UI日期选择器出现了一些问题。当我选择开始和结束日期（例如，2015/12/02-2015/12/08）时，我设法使其突出显示我的日期范围，然后以绿色突出显示其间的日期。

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

以下是一个示例：http://stephencelis.github.io/timeframe/#example_information

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

这是我到目前为止的代码：

$(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);
            }
        }
});
});

我希望有人能帮我一点忙：）我有点困在这里了：/

这将对您有所帮助。。。。

$(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');
        }
    });
   }
  }
相关文章：