I use https://flatpickr.js.org/
My code
const datepicker = flatpickr("#datepicker", {
inline: true,
dateFormat: "Y-m-d",
onMonthChange: function (selectedDates, dateStr, instance) {
instance.set("disable", [
function (date) {
return date.getMonth() !== instance.currentMonth;
}
]);
updateCalendarDisplay(instance, false);
},
onReady: function (selectedDates, dateStr, instance) {
updateCalendarDisplay(instance, false);
},
onChange: function (selectedDates, dateStr, instance) {
updateCalendarDisplay(instance, true);
}
});
function updateCalendarDisplay(instance, isDateChanged) {
setTimeout(() => {
const calendarContainer = instance.calendarContainer;
if (!calendarContainer) return;
const allDays = calendarContainer.querySelectorAll(".flatpickr-day");
const rowsWithClass = calendarContainer.querySelectorAll(
".is-date-one-row"
);
let rowStart = 0;
let rowEnd = 6;
let isLastRowNextMonth = true;
let totalRows = 0;
for (let i = 0; i < allDays.length; i++) {
const day = allDays[i];
if (i >= rowStart && i <= rowEnd) {
if (!day.classList.contains("nextMonthDay")) {
isLastRowNextMonth = false;
}
}
if (i === rowEnd) {
totalRows++;
if (isLastRowNextMonth) {
for (let j = rowStart; j <= rowEnd; j++) {
allDays[j].parentElement.classList.add("is-date-one-row");
}
} else {
for (let j = rowStart; j <= rowEnd; j++) {
allDays[j].parentElement.classList.remove("is-date-one-row");
}
}
rowStart = i + 1;
rowEnd = i + 7;
isLastRowNextMonth = true;
}
}
}, 10);
}
body {
background: #000;
}
.is-date-one-row .prevMonthDay:nth-last-of-type(1),
.is-date-one-row .prevMonthDay:nth-last-of-type(2),
.is-date-one-row .prevMonthDay:nth-last-of-type(3),
.is-date-one-row .prevMonthDay:nth-last-of-type(4),
.is-date-one-row .prevMonthDay:nth-last-of-type(5),
.is-date-one-row .prevMonthDay:nth-last-of-type(6),
.is-date-one-row .prevMonthDay:nth-last-of-type(7),
.is-date-one-row .nextMonthDay:nth-last-of-type(1),
.is-date-one-row .nextMonthDay:nth-last-of-type(2),
.is-date-one-row .nextMonthDay:nth-last-of-type(3),
.is-date-one-row .nextMonthDay:nth-last-of-type(4),
.is-date-one-row .nextMonthDay:nth-last-of-type(5),
.is-date-one-row .nextMonthDay:nth-last-of-type(6),
.is-date-one-row .nextMonthDay:nth-last-of-type(7) {
opacity: 0;
display: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<input type="text" id="datepicker">
This datepicker always displays dates in 6 rows, because of this sometimes a whole row of dates of another month is displayed.
The result I would like to get
I changed the number of lines with this function updateCalendarDisplay, but now when choosing a date or switching a month, the calendar jumps
This happens when there are less than 6 rows, but when there are 6 rows, the calendar works correctly (For example, if you select August)
Thank you, I will be glad for any help
If you want to achieve this using only CSS, then find the closest .nextMonthDay
at the beginning of the week, and hide it and the days after:
const datepicker = flatpickr("#datepicker", {
inline: true,
dateFormat: "Y-m-d",
});
body {
background: #000;
}
.flatpickr-day:nth-child(7n + 1).nextMonthDay {
display: none;
& ~ .nextMonthDay {
display: none;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<input type="text" id="datepicker">