jQuery UI Datepicker - Intervallo di date - Evidenzia giorni tra

Question

Sto cercando un modo di evidenziando i giorni tra l'intervallo di date di 2 ingressi al passaggio del mouse.

Questo esempio è quasi facendo quello che voglio raggiungere: http://hackingon.net/files/jquery_datepicker/range.htm

unica differenza è che l'evidenziazione della gamma selezionata deve avvenire su due datepickers separati e al passaggio del mouse.

Qualche suggerimento?

---

Aggiornamento:

Ok, un po 'più particolari:

Dopo aver selezionato una data dal primo DatePicker, la seconda datepicker dovrebbero evidenziare la data precedente selezionata. Se passi il mouse oltre un giorno dopo il giorno selezionato in precedenza, tutti i giorni dovrebbero evidenziare aggiungendo una classe.

---

Aggiornamento: Questo è quanto ho ottenuto:

$("#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/

L'unico problema, l'evento dal vivo mette in evidenza solo il TD della corrente aleggiava fila, ma non il TD del le file prima.

Qualche idea?

Answer 1

Ho aggiunto un po 'al tuo script. Ha funzionato come un fascino su JSFiddle. Dai un'occhiata e fammi sapere.

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

Answer 2

jQuery UI Datepicker - Evidenziare giorni in mezzo

ho aggiunto un po 'allo script - Periodo. Ha funzionato come un fascino su JSFiddle. Dai un'occhiata e fammi sapere.

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

Answer 3

edit: Questo script non funziona su jQuery 3. Tuttavia funziona sulla versione 1 e 2

this JSFiddle è un esempio di farlo con 2 tavoli di data (più mesi)

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

Answer 4

Realizzato un esempio di intervallo di date al passaggio del mouse su un datepicker in linea qui: 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()); 

      } 
     } 
    }); 
});