Affichage des taux dynamiques pour toutes les dates en utilisant le calendrier jquery ui

Dans un système de réservation de site Web de location de voitures, j'utilise le calendrier jquery ui comme sélecteur de dates pour la sélection "From Date" et "To Date".

Je souhaite afficher des taux dynamiques pour différentes dates comme indiqué sur la figure. Veuillez me dire comment je peux le faire?

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

Violon

Taux dynamiques pour différentes dates

Je l'ai géré en utilisant jQuery Datepicker par la bibliothèque de 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