jQuery UI Datepicker - 选定日期之后的颜色日期

Posted 2023-05-07

【中文标题】jQuery UI Datepicker - 选定日期之后的颜色日期

【英文标题】：jQuery UI Datepicker - color dates after the selected date

【发布时间】：2015-08-08 04:55:35

【问题描述】：

我正在使用 jQuery UI 日期选择器来允许用户选择一个日期。我需要在所选日期后 7 天上色。

例如，如果用户选择了1.1.2015，则2.1.2015 到8.1.2015 的日期应在单击时着色（在1.1.2015 上）。我正在关注this 指南，但我无法完成这项工作。

基本上我正在做的是创建一个未来日期数组（基于从所选日期计算的毫秒数 + 每天 86400000 毫秒），然后尝试在这个数组上应用 css 类。请指教。

编辑： 也许我应该提到，但这个选择器是内联的，所以必须立即进行更改。

编辑2： 这是一个来自jsfiddle的例子。

JS：

var arrayOfFollowingWeekDates = [];
var selectedStartingDate;

//date picker configuration
    $('#datepicker').datepicker(
        onSelect: function(dateText, inst)

            selectedStartingDate = dateText;
            var selectedDateAsObject = $(this).datepicker('getDate');
            arrayOfFollowingWeekDates = calcFollowingtWeekDates(selectedDateAsObject);
            if(selectedDateAsObject > new Date)
                console.log(selectedStartingDate);

            else
                console.log("bad date.");
            
        ,
        inline: true,
        showOtherMonths: true,
        beforeShowDay: function(day, date)
            var day = day.getDay();
            if (day == 5 || day == 6)
                return [false, ""];
             else 
                return [true, ""];
            
            var highlight = arrayOfFollowingWeekDates[date];
            if (highlight) 
                 return [true, "event", highlight];
             else 
                 return [true, '', ''];
            
        
    );

//this creates an array of the desired week, based on date objects
    function calcFollowingtWeekDates(selectedDateObj)
        var followingWeek = [];
        var tempArrayOfNextDates = [];
        var selectedDateInMilliseconds = selectedDateObj.getTime();
        console.log("selected date in milliseconds: "+selectedDateInMilliseconds);
        tempArrayOfNextDates[0]=selectedDateInMilliseconds;
        var day;
        var prevDay=selectedDateInMilliseconds;
        for(var i=0;i<7;i++)
            tempArrayOfNextDates[i] = 86400000 + prevDay;
            day = new Date(tempArrayOfNextDates[i]);
            prevDay = tempArrayOfNextDates[i];
            followingWeek[i]=day;
            console.log("next day is : "+ day);
        
        return followingWeek;
    

CSS：

.event a 
    background-color: #42B373 !important;
    background-image :none !important;
    color: #ffffff !important;

【问题讨论】：

第一个：您的代码有错误，第二个：请向我们提供一个“工作”小提琴的链接。如果你这样做，你会得到更多的回应。

谢谢，我已经用 jsfiddle 更新了我的帖子。

【参考方案1】：

这是一个有效的小提琴：http://jsfiddle.net/97L93a3h/2/

var selectedDay = new Date().getTime();

$('.datepicker').datepicker(
    onSelect: function (date) 
        selectedDay = $(this).datepicker('getDate').getTime();
    ,
    beforeShowDay: function (date) 
        var d = date.getTime();
        if (d > selectedDay && d < selectedDay + 1 + 86400000 * 7) 
            return [true, 'ui-state-highlight', ''];
         else 
            return [true, ''];
        
    
);

将此方法合并到您现有的脚本中。