Add class to every nth element when i select date - jquery-ui

Question

How i can add class to every date under selected day.
Lets say i click on Thursday and all dates under Thursday have some class.
I have service where you can chose frequency, weekly, 2 weeks, 4 weeks, and when user click on some date add select frequency the dates are highlighted on the calendar.
I have try to add css to every nth child from ui-state-default but this is not working.
```
$('#cookdate').datepicker({
numberOfMonths: 2,
altField: '#selectedDatecook',
minDate: 2,
maxPicks: 20,
onSelect: function (date) {
var date = $(this).datepicker('getDate');
var day = date.getUTCDay();
},
});

Answer 1

You will want to use a combination of onSelect and beforeShowDate. For example:
$(function() {
var selected, final;
var days = 7;
$('#cookdate').datepicker({
numberOfMonths: 2,
minDate: 2,
onSelect: function(dStr, obj) {
selected = $.datepicker.parseDate("mm/dd/yy", dStr);
final = new Date(selected);
final.setDate(selected.getDate() + days);
$("#selectdate").val($.datepicker.formatDate("mm/dd/yy", final));
},
beforeShowDay: function(dt) {
$(".highlighted").removeClass("highlighted");
if (dt > selected && dt <= final) {
return [true, "highlighted"];
} else {
return [true, ""];
}
}
});
});
td.highlighted, td.highlighted a.ui-state-default {
background-color: #ccc;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Cook Date: <input type="text" id="cookdate"> Select Date: <input type="text" id="selectdate"></p>
You can change days to be any number of days you want. beforeShowDays will then look for the matching dates and add a class to them, highlighted.