JQuery UI calendar - how to highlight days after current date?

Question

I’m working on a site for a client, on the site I use the JQuery UI Calendar , I need to be able to allocate 3 working days starting 2 days after the current date, but including math, so as not to count weekends. Here is my fiddle:

Js fiddle

Here is the HTML

<input type="text" id='datepicker'>

Here is js

var SelectedDates = {};
SelectedDates[new Date('04/14/2014')] = new Date('04/14/2014');
SelectedDates[new Date('04/15/2014')] = new Date('04/15/2014');
SelectedDates[new Date('04/16/2014')] = new Date('04/16/2014');

$('#datepicker').datepicker({
    minDate: 2,
    maxDate: "+4M +15D",
    beforeShowDay: function (date) {
        var Highlight = SelectedDates[date];
        if (Highlight) {
            return [true, "Highlighted", Highlight];
        } else {
            return [true, '', ''];
        }
    }
});

I am having trouble adding beforeShowDay: $.datepicker.noWeekendsto the code above. I also need 3 dates that are highlighted as variables, so they change depending on the current date, but I'm still learning JS, and I don't understand the logic of this.

I looked through this whole site and others, and although there are many questions / answers on how to highlight specific dates, none of them apply to what I'm trying to do.

, , , , , minDate .

Answer 1

:

jsFiddle

$(document).ready(function () {
    var css, count = 0,
        gap = 0,
        today = new Date();
    $('#datepicker').datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        minDate: 2,
        maxDate: "+4M +15D",
        beforeShowDay: function (date) {
            var day = date.getDay();
            var diff = new Date(date - today);
            var numDays = Math.ceil(diff / 1000 / 60 / 60 / 24);
            if (numDays > 0 && count < 3) {
                if (day != 6 && day != 0) {
                    gap++;
                    if (gap > 1) {
                        count++;
                        css = 'Highlighted';
                    } else css = '';
                }
            } else css = '';
            return [(day != 6) && (day != 0), css]; //0-Sunday 6-Saturday
        },
        onSelect: function () {
            count = 0;
            gap = 0;
        }
    });
});

Answer 2

UPDATE

:

var currentDay = new Date();
    var dayOfWeek;
    var highlighted = 0;
    var count = 0;
    var SelectedDates = {};

    while(highlighted < 3){
       dayOfWeek = currentDay.getDay();
        if(dayOfWeek != 0 && dayOfWeek != 6){
            if(count > 1){
                alert(currentDay);
                var month = currentDay.getMonth()+1;
                if(month.toString().length < 2)
                    month = '0'+month;
                var day = currentDay.getDate();
                if(day.toString().length < 2)
                    day = '0'+day;
                var year = currentDay.getFullYear();
                var dateStr = month+"/"+day+"/"+year;   
                SelectedDates[new Date(dateStr)] = new Date(dateStr);
                highlighted++;
            }
            else {
                count++;    
            }
        }
        currentDay = new Date(currentDay.getTime() + (24 * 60 * 60 * 1000));    
    }

:

FIDDLE