使用 jquery ui 日历显示所有日期的动态汇率

Question

在汽车租赁网站预订系统中，我使用 jquery ui 日历作为 "From Date" 和 "To Date" 选择的日期范围选择器。

我想显示不同日期的动态汇率，如图所示。请让我知道我该怎么做？

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

Fiddle

Answer 1

我已经使用 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": "0", "2016-06-26": "", "2016-07-26": "", "2016-07-15": "", "2016-08-16": ""}

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

使用 jquery ui 日历显示所有日期的动态汇率

Showing dynamic rates for all dates using jquery ui calendar

javascript

jquery

jquery-ui

datepicker

date-range