HotReboot,
пример смены формата, кликнуть по любой дате, кликнуть по кнопке, кликнуть снова по дате.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/datepicker-ru.js"></script>
<style type="text/css">
body {
font-size: 12px;
}
.highlight_days .ui-state-default {
background: rgba(102, 255, 102, 1)
}
.highlight_days:hover .ui-state-default {
background: rgba(255, 255, 0, 1)
}
.test .ui-state-default {
background: rgba(255, 215, 0, 1)
}
</style>
<script>
$(function() {
var events = [
["2021-08-01", "2021-08-04"],
["2021-08-25", "2021-09-28"]
];
function bigDay(date, arr) {
return arr.some(function(el) {
el = el.map(d => (d = new Date(d), d.setHours(0, 0, 0, 0), d));
return +date >= +el[0] && +date <= el[1]
})
}
$.datepicker.setDefaults($.datepicker.regional['ru']);
$('#datepicker').datepicker({
dateFormat: "yy.mm.dd",
beforeShowDay: function(date) {
return bigDay(date, events) ? [true, 'highlight_days', null] : [true, '', null];
},
onSelect: a => alert(a)
})
function newData(arr)
{ events = arr; //events.push(arr)
$('#datepicker').datepicker( "option", "dateFormat", "dd MM yy" );
$('#datepicker').datepicker( "refresh" );
}
$('button').click(_ => newData([["2021-08-05", "2021-08-15"]]))
});
</script>
</head>
<body>
<div id="datepicker"></div>
<button>"2021-08-05", "2021-08-15"</button>
</body>
</html>