Skip to content

feat(ion-datetime): add hidden-days when theme:ionic #30205

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

feat(ion-datetime): add hidden-days when theme:ionic #30205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 36 additions & 11 deletions core/src/components/datetime/datetime.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2193,7 +2193,7 @@ export class Datetime implements ComponentInterface {
</div>
);
}
private renderMonth(month: number, year: number) {
private renderMonth(month: number, year: number, theme: Theme) {
const { disabled, readonly } = this;

const yearAllowed = this.parsedYearValues === undefined || this.parsedYearValues.includes(year);
Expand Down Expand Up @@ -2234,10 +2234,35 @@ export class Datetime implements ComponentInterface {
}}
>
<div class="calendar-month-grid">
{getDaysOfMonth(month, year, this.firstDayOfWeek % 7).map((dateObject, index) => {
const { day, dayOfWeek } = dateObject;
{getDaysOfMonth(month, year, this.firstDayOfWeek % 7, theme === 'ionic').map((dateObject, index) => {
const { day, dayOfWeek, hiddenDay } = dateObject;
const { el, highlightedDates, isDateEnabled, multiple } = this;
const referenceParts = { month, day, year };
let _month = month;
let _year = year;

if(theme === 'ionic'){
if(hiddenDay && day !== null && day > 20) {
// Leading with the hidden day from the previous month
// if its a hidden day and is higher than '20' (last week even in feb)
if(month === 1) {
_year = year - 1;
_month = 12;
}else{
_month = month-1;
}
} else if(hiddenDay && day !== null && day < 15) {
// Leading with the hidden day from the next month
// if its a hidden day and is lower than '15' (first two weeks)
if(month === 12) {
_year = year + 1;
_month = 1;
} else {
_month = month + 1;
}
}
Comment on lines +2244 to +2262
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't this calculation be done through getDaysOfMonth?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getDaysOfMonth doesn't have value of month or year

}

const referenceParts = { month:_month, day, year:_year };
const isCalendarPadding = day === null;
const {
isActive,
Expand All @@ -2258,7 +2283,7 @@ export class Datetime implements ComponentInterface {

const dateIsoString = convertDataToISO(referenceParts);

let isCalDayDisabled = isCalMonthDisabled || isDayDisabled;
let isCalDayDisabled = isCalMonthDisabled || isDayDisabled || hiddenDay;

if (!isCalDayDisabled && isDateEnabled !== undefined) {
try {
Expand Down Expand Up @@ -2292,7 +2317,7 @@ export class Datetime implements ComponentInterface {
* Custom highlight styles should not override the style for selected dates,
* nor apply to "filler days" at the start of the grid.
*/
if (highlightedDates !== undefined && !isActive && day !== null) {
if (highlightedDates !== undefined && !isActive && day !== null && !hiddenDay) {
dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
}

Expand Down Expand Up @@ -2327,8 +2352,8 @@ export class Datetime implements ComponentInterface {
}}
tabindex="-1"
data-day={day}
data-month={month}
data-year={year}
data-month={_month}
data-year={_year}
data-index={index}
data-day-of-week={dayOfWeek}
disabled={isButtonDisabled}
Expand Down Expand Up @@ -2384,11 +2409,11 @@ export class Datetime implements ComponentInterface {
</div>
);
}
private renderCalendarBody() {
private renderCalendarBody(theme: Theme) {
return (
<div class="calendar-body ion-focusable" ref={(el) => (this.calendarBodyRef = el)} tabindex="0">
{generateMonths(this.workingParts, this.forceRenderDate).map(({ month, year }) => {
return this.renderMonth(month, year);
return this.renderMonth(month, year, theme);
})}
</div>
);
Expand All @@ -2397,7 +2422,7 @@ export class Datetime implements ComponentInterface {
return (
<div class="datetime-calendar" key="datetime-calendar">
{this.renderCalendarHeader(theme)}
{this.renderCalendarBody()}
{this.renderCalendarBody(theme)}
</div>
);
}
Expand Down
45 changes: 38 additions & 7 deletions core/src/components/datetime/utils/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,15 @@ export const getDaysOfWeek = (locale: string, theme: Theme, firstDayOfWeek = 0)
* the firstDayOfWeek value (Sunday by default)
* using null values.
*/
export const getDaysOfMonth = (month: number, year: number, firstDayOfWeek: number) => {
export const getDaysOfMonth = (month: number, year: number, firstDayOfWeek: number, displayHiddenDays = false) => {
const numDays = getNumDaysInMonth(month, year);
let previousNumDays: number; //previous month number of days
if (month === 1) { //If january the previous month should be january and the last year
previousNumDays = getNumDaysInMonth(12, year-1);
} else { //If not the previous month should be month -1 and the current year
previousNumDays = getNumDaysInMonth(month - 1, year);
}

const firstOfMonth = new Date(`${month}/1/${year}`).getDay();

/**
Expand All @@ -127,14 +134,38 @@ export const getDaysOfMonth = (month: number, year: number, firstDayOfWeek: numb
*/
const offset =
firstOfMonth >= firstDayOfWeek ? firstOfMonth - (firstDayOfWeek + 1) : 6 - (firstDayOfWeek - firstOfMonth);
let days: ({
day: number;
dayOfWeek: number;
hiddenDay: boolean;
} | {
day: null;
dayOfWeek: null;
hiddenDay: boolean;
})[] = [];
for (let i = 1; i <= numDays; i++) {
days.push({ day: i, dayOfWeek: (offset + i) % 7, hiddenDay: false });
}

if (displayHiddenDays) {
for (let i = 0; i <= offset; i++) {
// Using offset create previous month hidden day, starting from last day
days = [{ day: previousNumDays-i, dayOfWeek: (previousNumDays - i) % 7, hiddenDay:true }, ...days];
}

let days = [];
for (let i = 1; i <= numDays; i++) {
days.push({ day: i, dayOfWeek: (offset + i) % 7 });
}
// Calculate positiveOffset
// The calendar will display 42 days (6 rows of 7 columns)
// Knowing this the offset is 41 (we start at index 0)
// minus (the previous offset + the current month days)
const positiveOffset = 41 - (numDays + offset);
for (let i = 0; i < positiveOffset; i++) {
days.push( {day:i+1, dayOfWeek:((numDays + offset) + i) % 7, hiddenDay: true} )
}

for (let i = 0; i <= offset; i++) {
days = [{ day: null, dayOfWeek: null }, ...days];
} else {
for (let i = 0; i <= offset; i++) {
days = [{ day: null, dayOfWeek: null, hiddenDay:true }, ...days];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't hiddenDay be false?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeap, I'll fix it

}
}

return days;
Expand Down
Loading