jQuery यूआई डेटपिकर - दिनांक सीमा -

Question

के बीच के दिनों में हाइलाइट करें के बीच के दिनों को हाइलाइट करने के लिए माउस पर 2 इनपुट की तिथि सीमा को हाइलाइट करना।

यह उदाहरण लगभग कर रहा है मैं क्या हासिल करना चाहते: http://hackingon.net/files/jquery_datepicker/range.htm

केवल अंतर यह है कि चयनित श्रेणी की हाइलाइटिंग दो अलग-अलग datepickers पर और पर माउस पर होना चाहिए।

कोई सुझाव?

---

अद्यतन:

ठीक है, थोड़ा और अधिक विवरण:

पहले datepicker से एक तिथि चुनने के बाद, दूसरा datepicker पिछले चयनित तिथि पर प्रकाश डाला जाना चाहिए। यदि आप पिछले चुने हुए दिन से पहले एक दिन में माउस करते हैं, तो बीच में सभी दिन कक्षा जोड़कर हाइलाइट करना चाहिए।

---

अद्यतन: यह कितनी दूर मुझे मिल गया है:

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

केवल समस्या, लाइव इवेंट बस पर प्रकाश डाला गया पंक्ति hovered टीडी के वर्तमान की, लेकिन टीडी के नहीं की पहले पंक्तियों।

कोई विचार?

Answer 1

मैंने आपकी स्क्रिप्ट में कुछ जोड़ा। 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'); 
      } 
     } 
    } 

Answer 2

jQuery के यूआई datepicker - तिथि सीमा - में

के बीच मैं अपनी स्क्रिप्ट के लिए एक सा जोड़ा हाइलाइट दिनों। 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); 
      } 
     }); 

Answer 3

संपादित करें: यह स्क्रिप्ट 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'); 
     } 
    } 
} 

Answer 4

इनलाइन डेटपिकर के लिए दिनांक सीमा होवर का उदाहरण यहां दिया गया: 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()); 

      } 
     } 
    }); 
});