使用jquery ui日历显示所有日期的动态费率 [英] Showing dynamic rates for all dates using jquery ui calendar

问题描述

在汽车租赁网站预约系统中，我使用jquery ui日历作为从日期和到日期选择的日期范围选择器。

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

 < input type =textid =booking-fromname =booking-from/> 
< input type =textid =booking-toname =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（）。 
 var fullDate = day1 + - + month1 + - + year1; * / 
 var minDate = $（this）.datepicker（'getDate'）; 
 var newMin = new日期（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'）; 
  

解决方案

我已经使用 Keith Wood的jQuery Datepicker管理库

  $（'＃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）; 
} 
} 
 
功能垫（n）{
返回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>具有单独字段的日期范围：< / span>< / p> 
< input type =textid =startPicker>到
< input type =textid =endPicker> 
  

jsfiddle链接

In a Car Rental Website Reservation System, i am using jquery ui calendar as a date range picker for "From Date" and "To Date" selection.

I want to show dynamic rates for different dates as shown in figure. Please let me know how i can do that ?

<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

解决方案

I have manage it using jQuery Datepicker by Keith Wood library

$('#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

这篇关于使用jquery ui日历显示所有日期的动态费率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！