Skip to content

Commit

Permalink
Merge pull request #126 from uvarov-frontend/hotfix/select_month_and_…
Browse files Browse the repository at this point in the history 
…year_together_with_disablePast

Hotfix/select month and year together with disablePast
  • Loading branch information
@uvarov-frontend
uvarov-frontend authored Oct 3, 2023
2 parents fbdf60e + 725c253 commit ea910f4
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 12 deletions.
13 changes: 11 additions & 2 deletions package/src/scripts/methods/clickCalendar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,11 +164,13 @@ const clickCalendar = (self: IVanillaCalendar) => {
? getColumnID(self, self.CSSClasses.columnYear, self.CSSClasses.year, Number(yearItemEl.dataset.calendarYear), 'data-calendar-selected-year')
: Number(yearItemEl.dataset.calendarYear);
self.currentType = self.type;
if (self.selectedMonth < self.dateMin.getMonth() && self.selectedYear === self.dateMin.getFullYear()) {
if ((self.selectedMonth < self.dateMin.getMonth() && self.selectedYear <= self.dateMin.getFullYear()) || self.selectedYear < self.dateMin.getFullYear()) {
self.selectedMonth = self.dateMin.getMonth();
self.selectedYear = self.dateMin.getFullYear();
}
if (self.selectedMonth > self.dateMax.getMonth() && self.selectedYear === self.dateMax.getFullYear()) {
if ((self.selectedMonth > self.dateMax.getMonth() && self.selectedYear >= self.dateMax.getFullYear()) || self.selectedYear > self.dateMax.getFullYear()) {
self.selectedMonth = self.dateMax.getMonth();
self.selectedYear = self.dateMax.getFullYear();
}
if (self.actions.clickYear) self.actions.clickYear(e, self.selectedYear);
mainMethod(self);
Expand All @@ -186,13 +188,20 @@ const clickCalendar = (self: IVanillaCalendar) => {
self.currentType = self.type;
mainMethod(self);
} else if (monthItemEl) {
if (self.selectedMonth === undefined || !self.dateMin || !self.dateMax) return;
self.selectedMonth = self.type === 'multiple'
? getColumnID(self, self.CSSClasses.columnMonth, self.CSSClasses.month, Number(monthItemEl.dataset.calendarMonth), 'data-calendar-selected-month')
: Number(monthItemEl.dataset.calendarMonth);
if (self.type === 'multiple') {
const column = monthItemEl.closest(`.${self.CSSClasses.columnMonth}`) as HTMLElement;
const year = column.querySelector(`.${self.CSSClasses.year}`) as HTMLElement;
self.selectedYear = Number(year.dataset.calendarSelectedYear);
if (self.selectedMonth < self.dateMin.getMonth() && self.selectedYear <= self.dateMin.getFullYear()) {
self.selectedMonth = self.dateMin.getMonth();
}
if (self.selectedMonth > self.dateMax.getMonth() && self.selectedYear >= self.dateMax.getFullYear()) {
self.selectedMonth = self.dateMax.getMonth();
}
}
self.currentType = self.type;
if (self.actions.clickMonth) self.actions.clickMonth(e, self.selectedMonth);
Expand Down
18 changes: 14 additions & 4 deletions package/src/scripts/methods/createMonths.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,17 @@ import showMonth from './showMonth';
import showYear from './showYear';

const createMonths = (self: IVanillaCalendar, target?: HTMLElement) => {
const selectedMonth = target?.dataset.calendarSelectedMonth ? Number(target?.dataset.calendarSelectedMonth) : self.selectedMonth as number;
const selectedMonth = target?.dataset.calendarSelectedMonth ? Number(target.dataset.calendarSelectedMonth) : self.selectedMonth as number;
const yearEl = target?.closest(`.${self.CSSClasses.column}`)?.querySelector(`.${self.CSSClasses.year}`) as HTMLElement;
const selectedYear = yearEl ? Number(yearEl.dataset.calendarSelectedYear) : self.selectedYear as number;

self.currentType = 'month';
createDOM(self, target);
showMonth(self);
showYear(self);

const monthsEl = (self.HTMLElement as HTMLElement).querySelector(`.${self.CSSClasses.months}`);
if (self.selectedYear === undefined || !self.dateMin || !self.dateMax || !monthsEl) return;
if (!self.dateMin || !self.dateMax || !monthsEl) return;

if (self.settings.selection.month) monthsEl.classList.add(self.CSSClasses.monthsSelecting);

Expand All @@ -23,6 +26,13 @@ const createMonths = (self: IVanillaCalendar, target?: HTMLElement) => {
templateMonthEl.type = 'button';
templateMonthEl.className = self.CSSClasses.monthsMonth;

const columnID = () => {
if (self.type !== 'multiple') return 0;
const columnEls = (self.HTMLElement as HTMLElement).querySelectorAll(`.${self.CSSClasses.column}`) as NodeListOf<HTMLElement>;
const indexColumn = [...columnEls].findIndex((column) => column.classList.contains(`${self.CSSClasses.columnMonth}`));
return indexColumn > 0 ? indexColumn : 0;
};

for (let i = 0; i < self.locale.months.length; i++) {
const month = self.locale.months[i];
const monthEl = templateMonthEl.cloneNode(true) as HTMLButtonElement;
Expand All @@ -31,8 +41,8 @@ const createMonths = (self: IVanillaCalendar, target?: HTMLElement) => {
monthEl.classList.add(self.CSSClasses.monthsMonthSelected);
}

if ((i < self.dateMin.getMonth() && self.selectedYear === self.dateMin.getFullYear())
|| (i > self.dateMax.getMonth() && self.selectedYear === self.dateMax.getFullYear())
if ((i < self.dateMin.getMonth() + columnID() && selectedYear <= self.dateMin.getFullYear())
|| (i > self.dateMax.getMonth() + columnID() && selectedYear >= self.dateMax.getFullYear())
|| (i !== selectedMonth && !activeMonthsID.includes(i))) {
monthEl.classList.add(self.CSSClasses.monthsMonthDisabled);
monthEl.tabIndex = -1;
Expand Down
14 changes: 8 additions & 6 deletions package/src/scripts/methods/createYears.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import showYear from './showYear';

const createYears = (self: IVanillaCalendar, target?: HTMLElement) => {
if (self.viewYear === undefined || !self.dateMin || !self.dateMax) return;
const selectedYear = target?.dataset.calendarSelectedYear ? Number(target?.dataset.calendarSelectedYear) : self.selectedYear;
const selectedYear = target?.dataset.calendarSelectedYear ? Number(target?.dataset.calendarSelectedYear) : self.selectedYear as number;
self.currentType = 'year';
createDOM(self, target);
showMonth(self);
Expand All @@ -20,18 +20,20 @@ const createYears = (self: IVanillaCalendar, target?: HTMLElement) => {
templateYearEl.type = 'button';
templateYearEl.className = self.CSSClasses.yearsYear;

const relationshipID = () => {
if (self.type !== 'multiple') return 0;
return self.selectedYear === selectedYear ? 0 : 1;
};

for (let i = self.viewYear - 7; i < self.viewYear + 8; i++) {
const year = i;
const yearEl = templateYearEl.cloneNode(true) as HTMLButtonElement;

if (year === selectedYear) {
yearEl.classList.add(self.CSSClasses.yearsYearSelected);
}
if (year < self.dateMin.getFullYear()) {
yearEl.classList.add(self.CSSClasses.yearsYearDisabled);
yearEl.tabIndex = -1;
}
if (year > self.dateMax.getFullYear()) {

if (year < self.dateMin.getFullYear() + relationshipID() || year > self.dateMax.getFullYear()) {
yearEl.classList.add(self.CSSClasses.yearsYearDisabled);
yearEl.tabIndex = -1;
}
Expand Down

0 comments on commit ea910f4

Please sign in to comment.