Question

目前我正在为我的网站使用此日期选择器 - http://foxrunsoftware.github.io/DatePicker/，其功能非常有限。

现在我需要的是在所选日期范围内使用鼠标悬停效果。就像在这个网站上一样。

datepicker的工作代码：

function datePickerFrom(selector,numofCal)
{
//get page inner width
var iw = $('html').innerWidth();
var numCal = 2;
//Current date to be display
var dpSetCurDate = new Date();  
var cDate = new Date(dpSetCurDate.getFullYear(), dpSetCurDate.getMonth() + 1, 1);
//Set the text 'OR' over the line center                
if(iw<=480)
{
    numCal=1;
    cDate = new Date(dpSetCurDate.getFullYear(), dpSetCurDate.getMonth(), 1);
}
langName = findLanguageDays();
//Create the Datepicker Instance and assing it to from datepicker
$('.fdpfrom.'+selector).DatePicker({
    mode: 'single',
    inline: true,
    current: cDate,
    calendars: numCal,  
    locale: langName,
    onChange:function(date){            
        //If the datepicker linked to another one
        if($(this).parent('.fdpfrom').hasClass('roundTrip'))
        {
            /*Date Range Functionality*/
            var next7Days = addDays(new Date(date), 6);
            //Assign the date range to the linked datepiker
            var toDatePicker = $(this).parent('.fdpfrom').parent(".dpselect_class").parent(".datepicker").find('.fdpto');
            //get the to datepicker Date UI Element
            var toDateUIElm = toDatePicker.attr('data-dateUI');
            //Set To Datpicker Date Range
            var links = toDatePicker.attr('data-dateUI');
            var alinks = links.split('.');
            var someDate = new Date(next7Days.getFullYear(), next7Days.getMonth() + 1, 1);
            toDatePicker.empty();
            datePickerTo(alinks[1],'',[date,next7Days],someDate);

            //get To datepicker current date range
            var todrange = toDatePicker.DatePickerGetDate();
            //Set the toDatepicker Date UI Element Value    
            customUIDate(todrange,toDateUIElm,'array');
        }         
        //Set Custom Date Fromat for the Selected UI Elemen which Associated with the active 
        customUIDate(date,'dateUI.'+selector);
        console.log(date);
        //get the hidden value id from current date picker data attribute
        var hiddenValue = $(this).parent('.fdpfrom').attr('data-datepickerValue');          
        //Update Datepicker Date to a Hidden Value
        $('#'+hiddenValue).val(dateformat(date));

        //Remove active class from datepicker UI element
        $('.dateUI.'+selector).removeClass('active');
        //Close this datepicker
        $('.fdpfrom.'+selector).fadeToggle('fast');
    }     
});     
//Set the current date to from date picker
$('.fdpfrom.'+selector).DatePickerSetDate(new Date(), false);   
}

function datePickerTo(selector,numofCal,rangeDate,cDate)
{
//get page inner width
var iw = $('html').innerWidth();
var numCal = 2;
//Current date to be display
var dpSetCurDate = new Date();
if (cDate === undefined) {
    cDate = new Date(dpSetCurDate.getFullYear(), dpSetCurDate.getMonth() + 1, 1);
}
//Set the text 'OR' over the line center                
if(iw<=480)
{
    numCal=1;
    if(cDate==""){
        cDate = new Date(dpSetCurDate.getFullYear(), dpSetCurDate.getMonth(), 1);
    }
}
langName = findLanguageDays();
$('.fdpto.'+selector).DatePicker({
  mode: 'range',
  date:rangeDate,
  inline: true,
  current: cDate,
  calendars: numCal,
  locale: langName,       
  onChange:function(date){      
    //Set Custom Date Fromat for the Selected UI Elemen which Associated with the active 
    //Remove active class from datepicker UI element
    $('.dateUI.'+selector).removeClass('active');

    //get From datepicker current date range
    var fromDatePicker = $(this).parent('.fdpto').parent(".dpselect_class").parent(".datepicker").find('.fdpfrom');
    var fromDatepickerDate = fromDatePicker.DatePickerGetDate();

    var toDatePicker = $(this).parent('.fdpto');
    var toDatePickerDate = $(this).parent('.fdpto').DatePickerGetDate();

    if(fromDatepickerDate[0]>toDatePickerDate[0][1])
    {
        customUIDate(fromDatepickerDate[0],'dateUI.'+selector); 
    }else{      
        customUIDate(date,'dateUI.'+selector);  
    }
    /*Set Date Range*/
    toDatePicker.DatePickerSetDate([fromDatepickerDate[0],toDatePickerDate[0][1]]);
    //Close this datepicker
    $('.fdpto.'+selector).fadeToggle('fast');
  }
}); 
$('.fdpTo.'+selector).DatePickerSetDate(new Date(), true);
 }

Datepicker愤怒选择效果 - Javascript

0 个答案: