jQuery UI Datepicker - 日期範圍 - 突出顯示在

之間的日期

我正在尋找一種方式突出顯示日期在之間的日期範圍，鼠標懸停在2個輸入上。jQuery UI Datepicker - 日期範圍 - 突出顯示在

這個例子幾乎做我想要達到的目標： http://hackingon.net/files/jquery_datepicker/range.htm

唯一的區別是所選擇的範圍的高亮應該發生在兩個不同的datepickers和過鼠標。

有什麼建議嗎？

更新：

好，多一點細節：

選擇從第一個日期選擇的日期之後，第二個日期選擇器應突出先前選定的日期。如果您隨後將鼠標懸停在前一個選定日期的某一天，則應該通過添加課程來突出顯示之間的所有日期。

更新：這是我迄今爲止得到：

$("#input-service_date_leave, #input-service_date_return").datepicker({ 
     rangeSelect: true, 
     beforeShow: customRange, 
     onSelect: customRange, 
    }); 

    function customRange(input) { 
     if (input.id == "input-service_date_leave") { 

      $("#ui-datepicker-div td").die(); 

      if (selectedDate != null) { 
       $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); 
      } 
     } 
     if (input.id == "input-service_date_return") { 

      $("#ui-datepicker-div td").live({ 
       mouseenter: function() { 
        $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight"); 
       }, 
       mouseleave: function() { 
        $("#ui-datepicker-div td").removeClass("highlight"); 
       } 
      }); 

      var selectedDate = $("#input-service_date_leave").datepicker("getDate");     
      if (selectedDate != null) { 
       $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); 
      } 
     } 
    }

http://jsfiddle.net/mayko/WbWg3/1/

唯一的問題，現場活動只是凸顯了當前的TD的徘徊行，但不是在TD的之前的行。

任何想法？

來源

2011-10-20 Mayko

我在腳本中加了一點。就像JSFiddle上的魅力一樣工作。看一看，讓我知道。

$("#input-service_date_leave, #input-service_date_return").datepicker({ 
     rangeSelect: true, 
     beforeShow: customRange, 
     onSelect: customRange, 
    }); 

    function customRange(input) { 
     if (input.id == "input-service_date_leave") { 

      $("#ui-datepicker-div td").die(); 

      if (selectedDate != null) { 
       $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); 
      } 
     } 
     if (input.id == "input-service_date_return") { 

      $("#ui-datepicker-div td").live({ 
       mouseenter: function() { 
        $(this).parent().addClass("finalRow"); 
        $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight"); 
        $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight"); 
       }, 
       mouseleave: function() { 
        $(this).parent().removeClass("finalRow"); 
        $("#ui-datepicker-div td").removeClass("highlight"); 
       } 
      }); 

      var selectedDate = $("#input-service_date_leave").datepicker("getDate");     
      if (selectedDate != null) { 
       $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); 
      } 
     } 
    }

來源

2011-11-14 08:54:52 CodeMonkeyG

令人敬畏的兄弟。感謝堆！ – Mayko

這個答案幫了我！非常感謝！ – Marvzz

還有一件事，你能否幫助更新這個版本，並將其傳播到下個月？我在一個選擇器中顯示兩個月。謝謝！ – Marvzz

-1

jQuery UI的日期選擇器 - 日期範圍 - 在

之間我加了一下你的腳本高亮天。像JSFiddle上的魅力一樣工作。看一看，讓我知道。

http://jsfiddle.net/mkginfo/C5r9d/1/

var dates = $("#datepicker1, #datepicker2").datepicker({ 
      changeMonth: true, 
      changeYear: true, 
      dateFormat: 'dd/mm/yy', 
      maxDate: "01/01/2050", 
      minDate: "01/01/2000", 
      onSelect: function (selectedDate) { 

       var option = this.id == "datepicker1" ? "minDate" : "maxDate", 
        instance = $(this).data("datepicker"), 
        date = $.datepicker.parseDate(
        instance.settings.dateFormat || $.datepicker._defaults.dateFormat, 
        selectedDate, instance.settings); 
       dates.not(this).datepicker("option", option, date); 
      } 
     });

來源

2014-01-16 09:17:53

編輯：此腳本不能在jQuery的工作，然而3.它的版本1和2

this JSFiddle的工作是與2代日期表做的例子（多個月）

$("#input-service_date_leave, #input-service_date_return").datepicker({ 
    rangeSelect: true, 
    beforeShow: customRange, 
    onSelect: customRange, 
    numberOfMonths: [1, 2], 
}); 

function customRange(input) { 
    if (input.id == "input-service_date_leave") { 

     $("#ui-datepicker-div td").die(); 

     if (selectedDate != null) { 
      $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); 
     } 
    } 
    if (input.id == "input-service_date_return") { 

     $("#ui-datepicker-div td").live({ 
      mouseenter: function() { 
       $(this).parent().addClass("finalRow"); 
       $(".finalRow").parents('.ui-datepicker-group-last').parent().find('.ui-datepicker-group-first').find('tr').last().addClass("finalRowRangeOtherTable"); 
       $(".finalRowRangeOtherTable").find("td:not(.ui-datepicker-unselectable)").addClass("highlight"); 
       $(".finalRowRangeOtherTable").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight"); 

       $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight"); 
       $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight"); 
      }, 
      mouseleave: function() { 
       $(this).parent().removeClass("finalRow"); 
       $("#ui-datepicker-div td").removeClass("highlight"); 

        $(".finalRowRange").removeClass("finalRowRange").find('.highlight').removeClass("highlight"); 
      $(".finalRowRangeOtherTable").removeClass("finalRowRangeOtherTable").find('.highlight').removeClass("highlight"); 

      } 
     }); 

     var selectedDate = $("#input-service_date_leave").datepicker("getDate");     
     if (selectedDate != null) { 
      $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); 
     } 
    } 
}

來源

2016-02-02 15:01:08

有人將它遷移到jQuery 3請。 –

@AbhishekSaini應該在jquery 3上進行測試，但沒有通過測試。 jq3中棄用了哪些函數？ –

不，不起作用。 'live（）'＆'die（）'不在jQuery 3中。 –

舉一個內嵌日期選擇器的日期範圍懸停的例子： http://codepen.io/denissamoilov/pen/RGKyPb?editors=0010

$(function(){ 
    var datepicker = { 
     container: $("#datepicker"), 
     dateFormat: 'mm/dd/yy', 
     dates: [null, null], 
     status: null, 
     inputs: { 
      checkin: $('#checkin'), 
      checkout: $('#checkout'), 
      dates: $('#dates') 
     } 
    }; 

    datepicker.container.datepicker({ 
     numberOfMonths: 2, 
     dateFormat: datepicker.dateFormat, 
     minDate: 0, 
     maxDate: null, 

     beforeShowDay: function(date) { 
      var highlight = false, 
      currentTime = date.getTime(), 
      selectedTime = datepicker.dates; 

      // Highlight date range 
      if ((selectedTime[0] && selectedTime[0] == currentTime) || (selectedTime[1] && (currentTime >= selectedTime[0] && currentTime <= selectedTime[1]))) highlight = true; 

      return [true, highlight ? 'ui-datepicker-select' : ""]; 
     }, 
     onSelect: function(dateText) { 

      if (!datepicker.dates[0] || datepicker.dates[1] !== null) { 
       // CHOOSE FIRST DATE 

       // fill dates array with first chosen date 
       datepicker.dates[0] = $.datepicker.parseDate(datepicker.dateFormat, dateText).getTime(); 
       datepicker.dates[1] = null; 

       // clear all inputs 
       datepicker.inputs.checkin.val(''); 
       datepicker.inputs.checkout.val(''); 
       datepicker.inputs.dates.val(''); 

       // set current datepicker state 
       datepicker.status = 'checkin-selected'; 

       // create mouseover for table cell 
       $('#datepicker').delegate('.ui-datepicker td', 'mouseover', function(){ 

        // if it doesn't have year data (old month or unselectable date) 
        if ($(this).data('year') == undefined) return; 

        // datepicker state is not in date range select, depart date wasn't chosen, or return date already chosen then exit 
        if (datepicker.status != 'checkin-selected') return; 

        // get date from hovered cell 
        var hoverDate = $(this).data('year')+'-'+($(this).data('month')+1)+'-'+$('a',this).html(); 

        // parse hovered date into milliseconds 
        hoverDate = $.datepicker.parseDate('yy-mm-dd', hoverDate).getTime(); 

        $('#datepicker td').each(function(){ 

         // compare each table cell if it's date is in date range between selected date and hovered 
         if ($(this).data('year') == undefined) return; 

         var year = $(this).data('year'), 
          month = $(this).data('month'), 
          day = $('a', this).html(); 

         var cellDate = $(this).data('year')+'-'+($(this).data('month')+1)+'-'+$('a',this).html(); 

         // convert cell date into milliseconds for further comparison 
         cellDate = $.datepicker.parseDate('yy-mm-dd', cellDate).getTime(); 

         if ((cellDate >= datepicker.dates[0] && cellDate <= hoverDate) || (cellDate <= datepicker.dates[0] && cellDate >= hoverDate)) { 
          $(this).addClass('ui-datepicker-hover'); 
         } else { 
          $(this).removeClass('ui-datepicker-hover'); 
         } 

        }); 
       }); 

      } else { 
       // CHOOSE SECOND DATE 

       // push second date into dates array 
       datepicker.dates[1] = $.datepicker.parseDate(datepicker.dateFormat, dateText).getTime(); 

       // sort array dates 
       datepicker.dates.sort(); 

       var checkInDate = $.datepicker.parseDate('@', datepicker.dates[0]); 
       var checkOutDate = $.datepicker.parseDate('@', datepicker.dates[1]); 

       datepicker.status = 'checkout-selected'; 

       //fill input fields 

       datepicker.inputs.checkin.val($.datepicker.formatDate(datepicker.dateFormat, checkInDate)); 
       datepicker.inputs.checkout.val($.datepicker.formatDate(datepicker.dateFormat, checkOutDate)).change(); 

       datepicker.inputs.dates.val(datepicker.inputs.checkin.val() + ' - ' + datepicker.inputs.checkout.val()); 

      } 
     } 
    }); 
});

來源

2016-09-23 08:15:51 user2277022

jQuery UI Datepicker - 日期範圍 - 突出顯示在

回答

相關問題