karden,
осталось только проглотить
... далее сами ... перевести под свой формат, думаю сможите.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style type="text/css">
body{
font-size: 12px;
}
.active .ui-state-default{
background-color: #32CD32;
background-image: none;
}
.ui-state-default{
position: relative;
}
.end .ui-state-default:before{
position: absolute;
top:0;
left:0;
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 8px 0 0;
border-color: #FF0000 transparent transparent transparent;
margin: 0;
padding: 0;
}
.start .ui-state-default:after{
position: absolute;
right: 0;
bottom: 0;
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 8px 8px;
border-color: transparent transparent #FF0000 transparent;
margin: 0;
padding: 0;
}
.active:hover .ui-state-default{
background: rgba(255, 255, 0, 1)
}
#period_id{
width: 100px;
}
:focus{
outline:0;
border:0;
}
.busy .ui-state-default{
background-color: #FFC0CB;
background-image: none;
}
</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'
};
$.datepicker.setDefaults($.datepicker.regional["ru"]);
var $sel = $("#period_id"), $picker = $("#datepicker"), $end = $(".title"),
obj = {start : false, end : false},
data = {
"01.03.2016" : {start : true, end : false},
"02.03.2016" : {start : true, end : true},
"03.03.2016" : {start : false, end : true}
}
;
function selected() {
var selectedDate = $picker.val();
var period_date = +$sel.val() || 1,
instance = $picker.data("datepicker"),
date = $.datepicker.parseDate("dd.mm.yy", selectedDate, instance.settings);
obj.start = date.getTime();
date.setDate(date.getDate() + period_date);//тут нужна проверка нет ли в диапазоне занятых дней
obj.end = date.getTime();
date = $.datepicker.formatDate("dd.mm.yy", date, instance.settings);
$end.text("Дата заезда : " + selectedDate + " Дата выезда: " + date);
$picker.datepicker( "refresh" );
}
function show(date) {
var instance = $picker.data("datepicker"),
dateStr = $.datepicker.formatDate("dd.mm.yy", date, instance.settings),
cls = "", title = "свободно", ev = true;
if(data[dateStr]){
cls = "busy";
data[dateStr].end && (cls += " end", title = "заезд после обеда");
data[dateStr].start && (cls += " start", title = "занято", ev = false);
}
if (obj.start && date.getTime() >= obj.start && date.getTime() <= obj.end) {
title = "Забронировано вами";
if(date.getTime() == obj.start) {cls += " active start"; title = "день заезда";}
else if(date.getTime() == obj.end) {cls += " active end"; title = "день выезда";}
else cls += " active start end";
return[ev, cls, title]
} ;
return[ev, cls, title]}
$picker.datepicker({
dateFormat: "dd.mm.yy",
minDate: 0,
onSelect: selected,
beforeShowDay: show,
showWeek: true,
weekHeader: "Нед."
}).tooltip();
//$sel.on("change", selected); нужна проверка диапазона
var plural = function (b) {
return function (a) {
return b[1 == a % 10 && 11 != a % 100 ? 0 : 2 <= a % 10 && 4 >= a % 10 && (10 > a % 100 || 20 <= a % 100) ? 1 : 2]
}
};
var d = plural([' день',' дня',' дней'])
for (var i=1; i< 25; i++) {
$("<option>", {text : i + d(i), value : i}).appendTo($sel)
};
$sel.selectmenu({change: function( event, ui ) {
$(this).change()
}});
});
</script>
</head>
<body>
<h2 class="title">Выберите количество дней и дату заезда</h2>
<br>
<label>Количество дней проживания
<select id="period_id"></select>
</label><br>
<div id="datepicker"></div>
</body>
</html>