Как отрисовать промежуток между 2 датами в jqurery UI datapicker?
$.datepicker.regional.ru = {
closeText: "Закрыть",
prevText: "<Пред",
nextText: "След>",
currentText: "Сегодня",
monthNames: [ "Январь","Февраль","Март","Апрель","Май","Июнь",
"Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь" ],
monthNamesShort: [ "Янв","Фев","Мар","Апр","Май","Июн",
"Июл","Авг","Сен","Окт","Ноя","Дек" ],
dayNames: [ "воскресенье","понедельник","вторник","среда","четверг","пятница","суббота" ],
dayNamesShort: [ "вск","пнд","втр","срд","чтв","птн","сбт" ],
dayNamesMin: [ "Вс","Пн","Вт","Ср","Чт","Пт","Сб" ],
weekHeader: "Нед",
dateFormat: "dd.mm.yy",
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: "" };
$.datepicker.setDefaults( $.datepicker.regional.ru );
$( ".datepicker-multiple" ).datepicker({
numberOfMonths: 3,
});.calendars-wrap .ui-widget.ui-widget-content {
border: none;
}
.calendars-wrap .ui-datepicker-inline {
width: 100% !important;
display: flex;
justify-content: space-between;
}
.calendars-wrap .calendars-wrap .ui-widget.ui-widget-content {
border: none;
}
.calendars-wrap .ui-datepicker-multi-3 .ui-datepicker-group {
&:last-child {
margin-right: 0;
}
}
.calendars-wrap .datepicker-multiple .ui-widget.ui-widget-content {
display: flex !important;
width: 100% !important;
}
.calendars-wrap .ui-datepicker-row-break {
display: none;
}
.calendars-wrap .ui-datepicker-multi-3 .ui-datepicker-group:nth-child(1) {
margin-right: 48px;
}
.calendars-wrap .ui-datepicker-multi-3 .ui-datepicker-group:nth-child(2) {
margin-right: 48px;
}
.calendars-wrap {
margin-top: 99px;
}
.ui-widget-header {
background: none;
border: none;
margin-bottom: 44px;
}
.calendars-wrap .ui-widget-header {
background: none;
border: none;
margin-bottom: 44px;
}
.calendars-wrap .ui-datepicker .ui-datepicker-title {
font-family: $Roboto;
font-style: normal;
font-weight: bold;
font-size: 26px;
line-height: 32px;
color: #151515;
}
.ui-datepicker th {
font-family: $Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: #9B9B9B;
text-transform: lowercase;
padding: 0;
padding-bottom: 16px;
border-bottom: 1px solid rgba(155, 155, 155, 0.3);
}
.calendars-wrap .ui-datepicker th {
font-family: $Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: #9B9B9B;
text-transform: lowercase;
padding: 0;
padding-bottom: 16px;
border-bottom: 1px solid rgba(155, 155, 155, 0.3);
}
.calendars-wrap .ui-datepicker-calendar tbody tr:first-child td {
padding-top: 30px;
}
.ui-datepicker td {
height: 28px;
padding-bottom: 13px;
background: none;
}
.calendars-wrap .ui-datepicker td {
height: 28px;
padding-bottom: 13px;
background: none;
}
.ui-state-default {
background: none !important;
border: none !important;
font-family: $Roboto ;
font-style: normal;
font-weight: bold !important;
font-size: 14px;
line-height: 16px;
color: #151515 !important;
text-align: center !important;
}
.calendars-wrap .ui-state-default {
background: none !important;
border: none !important;
font-family: $Roboto ;
font-style: normal;
font-weight: bold !important;
font-size: 14px;
line-height: 16px;
color: #151515 !important;
text-align: center !important;
}
.calendars-wrap .ui-datepicker-today {
position: relative;
}
.calendars-wrap .ui-datepicker-today:after {
content: "";
position: absolute;
top: 33%;
left: 52%;
transform: translate(-50%, -50%);
width: 36px;
height: 36px;
background: #C0964C;
border-radius: 50%;
}
.calendars-wrap .ui-datepicker-today a {
position: relative;
z-index: 1;
color: #fff !important;
}
/*.calendars-wrap .ui-icon-circle-triangle-w {
display: block;
width: 10px;
height: 10px;
background-image: url('../img/al.svg') !important;
}
.calendars-wrap .ui-widget-header .ui-icon {
background-image: url('../img/al.svg') !important;
}
.calendars-wrap .ui-datepicker .ui-datepicker-prev {
background-image: url('../img/al.svg') !important;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
}*/
.calendars-wrap .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
background-color: #fff;
border: none;
}
.calendars-wrap .ui-datepicker .ui-datepicker-next {
/* background-image: url('../img/al.svg') !important;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;*/
transform: rotate(180deg);
}<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="format-detection" content="telephone=no">
<meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="calendars-wrap">
<div class="datepicker-multiple"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="scripts.js"></script>
</body>
</html>Немного завела в тупик задача.
Есть календарь на основе плагина UI datapicker.
На страницу он должен выводится без возможности взаимодействия с пользователем. Он нужен что бы отображать свободные даты. По моей задумке даты будут приходить из WP админки.
Задача состоит в том, что бы взять эти даты, и на их основе нарисовать такое (c 6 по 15 мая):
И таких дат может быть несколько и на разные месяц... Помогите пожалуйста с этим вопросом.
Ответы (1 шт):
Автор решения: teran
→ Ссылка
проверьте даты на попадание в имеющиеся интервалы (массив ranges в примере) с помощью события beforeShowDate и добавьте нужные классы. Ну и собственно переопределите стили нужным образом.
const cd = new Date();
const range = [{
s: new Date(cd.getFullYear(), cd.getMonth(), 5),
e: new Date(cd.getFullYear(), cd.getMonth(), 15)}
];
$( ".datepicker" ).datepicker({
beforeShowDay: function(d){
let cls = range.reduce(function(cls,v){
if(d.getTime() >= v.s.getTime() &&
d.getTime() <= v.e.getTime()) cls.push("p-inside");
if(d.getTime() == v.s.getTime()) cls.push('p-start');
if(d.getTime() == v.e.getTime()) cls.push('p-end');
return cls;
}, []);
return [true, cls.join(' '), null];
}
});.p-inside a { color: blue !important; }
.p-start a { color: red !important; }
.p-end a { color: red !important; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="datepicker"></div>