maxPicks with beforeShowDay issue

[codingSAtime]

When applying multiple colors to the date picker when using beforeShowDay and having a maxPicks set to the calendar the dates listed in the beforeShowDay colorize function do not apply to the maxPicks... So if i have no dates that are colored with beforeShowDate and the colorize function the maxPicks works fine but if there are colorized dates then you can select any date that is colorized on top of the limit of the maxPicks.

here is a look at the current code:

var blueDates = []; blueDates.push(@Html.Raw(Model.blueDates));
var greenDates = []; greenDates.push(@Html.Raw(Model.greenDates));
var redDates = []; redDates.push(@Html.Raw(Model.redDates));
var yellowDates = []; yellowDates.push(@Html.Raw(Model.yellowDates));
var darkGreenDates = []; darkGreenDates.push(@Html.Raw(Model.darkGreenDates));

// new date picker to be displayed
$("#with-altField").multiDatesPicker(
    {
        // maximum selectable days
        maxPicks: 1,
        //colorize the dates on the calendar from array values
        beforeShowDay: function colorize(date) {
            mdy = (date.getMonth() + 1) + '-' + date.getDate() + '-' + date.getFullYear();
            if ($.inArray(mdy, blueDates) > -1) {
                return [true, "blue", ''];
            } else if ($.inArray(mdy, greenDates) > -1) {
                return [true, "green"];
            } else if ($.inArray(mdy, redDates) > -1) {
                return [true, "red"];
            } else if ($.inArray(mdy, yellowDates) > -1) {
                return [true, "yellow"];
            } else if ($.inArray(mdy, darkGreenDates) > -1) {
                return [true, "darkGreen"];
            } else {
                return [true, '', ''];
            }
        },
        altField: '#dates'
    });