jquery ui calendarを使用しているすべての日付の動的レートを表示

Question

レンタカーウェブサイト予約システムでは、 "From Date"と "To Date"の日付範囲選択ツールとしてjquery ui calendarを使用しています。

図に示すように、異なる日付の動的レートを表示したいとします。どうすればいいのか教えてください。

<input type="text" id="booking-from" name="booking-from" /> 
<input type="text" id="booking-to" name="booking-to" /> 

$("#booking-from").datepicker({ 
    defaultDate: "+1w", 
    minDate: 0, 
    firstDay: 0, 
    dateFormat: 'dd-mm-yy', 
    changeMonth: true, 
    numberOfMonths: 1, 
    onClose: function(selectedDate) { 

     /*var day1 = $("#booking-from").datepicker('getDate').getDate() + 1;     
     var month1 = $("#booking-from").datepicker('getDate').getMonth();    
     var year1 = $("#booking-from").datepicker('getDate').getFullYear(); 
     year1 = year1.toString().substr(2,2); 
     var fullDate = day1 + "-" + month1 + "-" + year1;*/   
     var minDate = $(this).datepicker('getDate'); 
     var newMin = new Date(minDate.setDate(minDate.getDate() + 1)); 
     $("#booking-to").datepicker("option", "minDate", newMin); 
    } 
}); 
$("#booking-to").datepicker({ 
    defaultDate: "+1w", 
    minDate: '+2d', 
    changeMonth: true, 
    firstDay: 0, 
    dateFormat: 'dd-mm-yy', 
    numberOfMonths: 1, 
    onClose: function(selectedDate) { 
     var maxDate = $(this).datepicker('getDate'); 
     var newMax = new Date(maxDate.setDate(maxDate.getDate() - 1)); 
     $("#booking-from").datepicker("option", "maxDate", newMax); 
    } 
}); 

$("#booking-from").datepicker('setDate', '+1'); 
$("#booking-to").datepicker('setDate', '+8'); 

Answer 1

Fiddle

私はjQuery Datepicker by Keith Woodライブラリを使用して、それを管理してい

$('#startPicker,#endPicker').datepick({ 
       onSelect: customRange, onDate: showDayOfYear, showTrigger: '#calImg' 
     }); 

function customRange(dates) { 
     if (this.id === 'startPicker') { 
      console.log(dates[0]); 
      $('#endPicker').datepick('option', 'minDate', dates[0] || null); 
     } 
     else { 
      $('#startPicker').datepick('option', 'maxDate', dates[0] || null); 
     } 
} 

function pad(n) { 
     return n < 10 ? '0' + n : n 
    } 

var specificPrices = {"2016-06-12": "$300", "2016-06-26": "$63", "2016-07-26": "$63", "2016-07-15": "$63", "2016-08-16": "$63"} 

function showDayOfYear(date) { 
      var checkDate = date.getFullYear() + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate()); //2015-12-04 
      var specificPrice; 
      if (specificPrices[checkDate]) { 
       specificPrice = specificPrices[checkDate]; 
      } else { 
       specificPrice = ''; 
      } 
      return { 
       content: date.getDate() + '<br><sub>' + specificPrice + '</sub>', dateClass: 'showDoY' 
} 

HTML

<p><span class="demoLabel">Date range with separate fields:</span></p> 
<input type="text" id="startPicker"> to 
<input type="text" id="endPicker"> 

jsfiddle Link