<head>
<link rel="stylesheet" href="http://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>
<input required class="datepicker" id="datepicker1" type="text" name="date" placeholder="Collection Date" autocomplete="off">
</body>
<script>
$(document).ready(function() {
var dates1 = ["20/05/2021", "21/05/2021", "22/05/2021"];
function DisableDates1(date1) {
var string = jQuery.datepicker.formatDate('dd/mm/yy', date1);
return [dates1.indexOf(string) == -1];
}
jQuery("#datepicker1").datepicker({
minDate: 2,
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 1,
changeYear: true,
beforeShowDay: DisableDates1,
onClose: function(selectedDate, inst) {
var minDate = new Date(Date.parse(selectedDate));
minDate.setDate(minDate.getDate() + 2);
jQuery("#datepicker2").datepicker("option", "minDate", minDate);
}
});
});
</script>