突出显示两个选定日期之间的日期 jQuery UI Datepicker

Posted 2023-05-09

【中文标题】突出显示两个选定日期之间的日期 jQuery UI Datepicker

【英文标题】：Highlighting dates between two selected dates jQuery UI Datepicker

【发布时间】：2011-02-08 18:09:48

【问题描述】：

我有一个将 numberOfMonths 设置为 2 的日期选择器。 到达日期和离开日期使用以下逻辑确定（在 onSelect 中）： if ((count % 2)==0) depart = $("#datepicker-1").datepicker('getDate'); if (arriv > depart) temp=arriv; arriv=depart; depart=temp; $("#check-in").val($.datepicker.formatDate("DD, MM d, yy",arriv)); $("#check-out").val($.datepicker.formatDate("DD, MM d, yy",depart)); else arriv = $("#datepicker-1").datepicker('getDate'); depart = null; if ((arriv > depart)&&(depart!=null)) temp=arriv; arriv=depart; depart=temp; $("#day-count").val(''); $("#check-in").val($.datepicker.formatDate("DD, MM d, yy",arriv)); $("#check-out").val($.datepicker.formatDate("DD, MM d, yy",depart)); if(depart!=null) diffDays = Math.abs((arriv.getTime() - depart.getTime())/(oneDay)); if (diffDays == 0) $("#day-count").val((diffDays+1)+' Night/s'); else $("#day-count").val(diffDays+' Night/s'); 获取这2个日期内的天数没有问题 我现在想要的是突出显示从到达到离开的日期 我尝试解决 onSelect 但没有运气。 我现在使用 beforeShowDay 来突出显示这些日期，但我似乎无法弄清楚 从here 获得了样本 基本上，它被定制为突出显示所选日期后的 11 天或 12 天（这是该链接中的代码）。 $('#datePicker').datepicker(beforeShowDay: function(date) if (selected != null && date.getTime() > selected.getTime() && (date.getTime() - selected.getTime()) 由于我是使用 UI 的新手，而且我还不清楚逻辑，所以我似乎无法弄清楚这一点。关于如何使用我在确定两者时使用的上述逻辑在到达和离开之间制作这个突出显示日期有什么想法吗？

【问题讨论】：

您的意思是在 Jquery UI 的日历弹出窗口中突出显示它...？

日历弹出是什么意思？基本上，我想突出显示从第一个选定日期到第二个选定日期的日期。例如，我选择了 2010 年 4 月 19 日，并在 2010 年 4 月 21 日结束了我的选择。从 4 月 19 日到 2010 年 4 月 21 日的日期应该突出显示（或将其背景颜色更改为某种东西）。

【参考方案1】：

超级老问题，但我为任何找到此问题的人找到了答案：http://jsfiddle.net/kVsbq/4/

JS

$(".datepicker").datepicker(
minDate: 0,
numberOfMonths: [12, 1],
beforeShowDay: function (date) 
    var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
    var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
    return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
,
onSelect: function (dateText, inst) 
    var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
    var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
    if (!date1 || date2) 
        $("#input1").val(dateText);
        $("#input2").val("");
        $(this).datepicker();
     else 
        $("#input2").val(dateText);
        $(this).datepicker();
    

);

【参考方案2】：

如果这有帮助.. :-)

$(function() 
     var togo=['10/25/2013']
     var datesArray=['10/27/2013','10/28/2013']
     var datesArray1=['10/25/2013','10/26/2013']
     var datesArray2=['10/24/2013']


        $( "#datepicker" ).datepicker(
            numberOfMonths: 2,

            selectMultiple:true,
            beforeShowDay: function (date) 
                var theday = (date.getMonth()+1) +'/'+ 
                            date.getDate()+ '/' + 
                            date.getFullYear();
                    return [true,$.inArray(theday, datesArray2) >=0?"specialDate":($.inArray(theday, datesArray)>=0?"specialDate2":($.inArray(theday, datesArray1)>=0?"specialDate1":''))];
                ,

            onSelect: function(date)

             console.log("clicked"+date);  
            return [true,$.inArray(['10/24/2013'], togo) >=0?"specialDate":($.inArray(date, datesArray1)>=0?"specialDate1":'')] ;  

            

        );
        //$.inArray(theday, datesArray) >=0?"specialDate":'specialDate1'
    );

http://jsfiddle.net/pratik24/Kyt2w/3/

【参考方案3】：

不是一个完整的答案，但这可能很有用：

http://www.eyecon.ro/datepicker/

很不幸地命名，但它似乎是你需要的。