basicom,
<!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.12.1/themes/sunny/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>
<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() {
$.datepicker.regional['ru'] = {
closeText: 'Закрыть',
prevText: '<Пред',
nextText: 'След>',
currentText: 'Сегодня',
monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь', 'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн', 'Июл','Авг','Сен','Окт','Ноя','Дек'],
dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false,
showOtherMonths:true,
selectOtherMonths:true,
changeMonth:true,
changeYear: false,
showAnim:'scale'
};
var events = [];
function bigDay(date, arr)
{
return arr.some(function(el) {
return date >= new Date(el[0]) && date <= new Date(el[1])
})
}
$.datepicker.setDefaults($.datepicker.regional['ru']);
$( '#datepicker' ).datepicker({
numberOfMonths: [1, 3],
dateFormat: "yy.mm.dd",
beforeShowDay: function(date) {
return bigDay(date, events) ? [true, 'highlight_days', null] : [true, '', null];
},
onSelect : function(dateText, elem) {
var date = $.datepicker.parseDate( "yy.mm.dd", dateText);
var dateLast = $.datepicker.formatDate( "yy-mm-dd", date );
date.setMonth(elem.selectedMonth - 2);
$('#datepicker').datepicker("setDate",date);
var dateFirst = $.datepicker.formatDate( "yy-mm-dd", date );
events = [[dateFirst, dateLast]];
$( '[name="startDate"]' ).val(dateFirst);
$( '[name="endDate"]' ).val(dateLast);
}
})
});
</script>
</head>
<body>
<div id="datepicker"></div>
<input name="startDate">
<input name="endDate">
</body>
</html>