繁体   English   中英

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

[英]jQuery UI Datepicker - color dates after the selected date

我正在使用jQuery UI datepicker来允许用户选择日期。 我需要在所选日期后7天着色。

例如,如果用户选择1.1.2015 ,天2.1.20158.1.2015 ,应在点击(在有色1.1.2015 )。 我正在遵循指南,但我无法完成这项工作。

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

编辑:
也许我应该提到,但这个选择器是内联的,因此必须立即进行更改。

EDIT2:
这是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;
}

这是一个工作小提琴: 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, ''];
        }
    }
});

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM