I have multiple date pickers on a page and I'm trying to iterate through the dates to find the currently selected date and add aria-selected='true' to the currently selected date with the class of.ui-state-active. First though, I want to loop through and remove the aria-selected='true' from all others, so only the selected date has the aria-selected value. I have created an OnSelect function to iterate the dates looking for the selected date.
Maybe I'm not using the correct event. Any help would be awesome. Thanks
$(function() {
$(".datepicker").datepicker({
onSelect: function(dateText, inst) {
$("a .ui-state-default").each(function() {
//Remove aria-selected from all existing dates to reset
$(this).removeAttr('aria-selected');
// Look for the selected date using class ui-state-active
if ($(this).hasClass(".ui-state-active")) {
// Add aria-selected='true' to the current selected date
$(this).attr('aria-selected', true);
}
});
console.log("Selected date:", dateText);
}
});
});<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https:////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>
</head>
<body>
<p>Date: <input type="text" class="datepicker"></p>
</body>
</html>Date Picker on input field:
