diff --git a/packages/@mantine/dates/src/components/Day/Day.tsx b/packages/@mantine/dates/src/components/Day/Day.tsx index d032934e90d..a8382a3c187 100644 --- a/packages/@mantine/dates/src/components/Day/Day.tsx +++ b/packages/@mantine/dates/src/components/Day/Day.tsx @@ -139,7 +139,7 @@ export const Day = factory((_props, ref) => { unstyled={unstyled} {...others} > - {renderDay?.(date) || date.getDate()} + {renderDay?.(date) || dayjs(date).date()} ); }); diff --git a/packages/@mantine/dates/src/components/Month/Month.tsx b/packages/@mantine/dates/src/components/Month/Month.tsx index af55c4e3eb2..b202701937b 100644 --- a/packages/@mantine/dates/src/components/Month/Month.tsx +++ b/packages/@mantine/dates/src/components/Month/Month.tsx @@ -23,7 +23,6 @@ import { getMonthDays } from './get-month-days/get-month-days'; import { getWeekNumber } from './get-week-number/get-week-number'; import { isAfterMinDate } from './is-after-min-date/is-after-min-date'; import { isBeforeMaxDate } from './is-before-max-date/is-before-max-date'; -import { isSameMonth } from './is-same-month/is-same-month'; import classes from './Month.module.css'; export type MonthStylesNames = @@ -216,7 +215,7 @@ export const Month = factory((_props, ref) => { const rows = dates.map((row, rowIndex) => { const cells = row.map((date, cellIndex) => { - const outside = !isSameMonth(date, month); + const outside = !dayjs(date).isSame(dayjs(month), 'month'); const ariaLabel = getDayAriaLabel?.(date) || dayjs(date) diff --git a/packages/@mantine/dates/src/components/Month/get-date-in-tab-order/get-date-in-tab-order.ts b/packages/@mantine/dates/src/components/Month/get-date-in-tab-order/get-date-in-tab-order.ts index 5e582fac387..8f5eff6ff6f 100644 --- a/packages/@mantine/dates/src/components/Month/get-date-in-tab-order/get-date-in-tab-order.ts +++ b/packages/@mantine/dates/src/components/Month/get-date-in-tab-order/get-date-in-tab-order.ts @@ -2,7 +2,6 @@ import dayjs from 'dayjs'; import { DayProps } from '../../Day/Day'; import { isAfterMinDate } from '../is-after-min-date/is-after-min-date'; import { isBeforeMaxDate } from '../is-before-max-date/is-before-max-date'; -import { isSameMonth } from '../is-same-month/is-same-month'; export function getDateInTabOrder( dates: Date[][], @@ -21,7 +20,7 @@ export function getDateInTabOrder( isAfterMinDate(date, minDate) && !excludeDate?.(date) && !getDateControlProps?.(date)?.disabled && - (!hideOutsideDates || isSameMonth(date, month)) + (!hideOutsideDates || dayjs(date).isSame(dayjs(month), 'month')) ); const selectedDate = enabledDates.find((date) => getDateControlProps?.(date)?.selected); diff --git a/packages/@mantine/dates/src/components/Month/get-end-of-week/get-end-of-week.ts b/packages/@mantine/dates/src/components/Month/get-end-of-week/get-end-of-week.ts index 14a22479b4c..2e1d9b46c6b 100644 --- a/packages/@mantine/dates/src/components/Month/get-end-of-week/get-end-of-week.ts +++ b/packages/@mantine/dates/src/components/Month/get-end-of-week/get-end-of-week.ts @@ -1,12 +1,13 @@ +import dayjs from 'dayjs'; import type { DayOfWeek } from '../../../types'; export function getEndOfWeek(date: Date, firstDayOfWeek: DayOfWeek = 1) { - const value = new Date(date); - const lastDayOfWeek = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1; + let value = dayjs(date); - while (value.getDay() !== lastDayOfWeek) { - value.setDate(value.getDate() + 1); + const lastDayOfWeek = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1; + while (value.day() !== lastDayOfWeek) { + value = value.add(1, 'day'); } - return value; + return value.toDate(); } diff --git a/packages/@mantine/dates/src/components/Month/get-month-days/get-month-days.ts b/packages/@mantine/dates/src/components/Month/get-month-days/get-month-days.ts index f48f7acc503..46575143077 100644 --- a/packages/@mantine/dates/src/components/Month/get-month-days/get-month-days.ts +++ b/packages/@mantine/dates/src/components/Month/get-month-days/get-month-days.ts @@ -1,3 +1,4 @@ +import dayjs from 'dayjs'; import { DayOfWeek } from '../../../types'; import { getEndOfWeek } from '../get-end-of-week/get-end-of-week'; import { getStartOfWeek } from '../get-start-of-week/get-start-of-week'; @@ -13,9 +14,10 @@ export function getMonthDays({ firstDayOfWeek = 1, consistentWeeks, }: GetMonthDaysInput): Date[][] { - const currentMonth = month.getMonth(); - const startOfMonth = new Date(month.getFullYear(), currentMonth, 1); - const endOfMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0); + const day = dayjs(month).subtract(dayjs(month).date() - 1, 'day'); + const start = dayjs(day.format('YYYY-M-D')); + const startOfMonth = start.toDate(); + const endOfMonth = start.add(+start.daysInMonth() - 1, 'day').toDate(); const endDate = getEndOfWeek(endOfMonth, firstDayOfWeek); const date = getStartOfWeek(startOfMonth, firstDayOfWeek); const weeks: Date[][] = []; diff --git a/packages/@mantine/dates/src/components/Month/get-start-of-week/get-start-of-week.ts b/packages/@mantine/dates/src/components/Month/get-start-of-week/get-start-of-week.ts index 2bf51c5dc2e..13ba717a261 100644 --- a/packages/@mantine/dates/src/components/Month/get-start-of-week/get-start-of-week.ts +++ b/packages/@mantine/dates/src/components/Month/get-start-of-week/get-start-of-week.ts @@ -1,11 +1,11 @@ +import dayjs from 'dayjs'; import type { DayOfWeek } from '../../../types'; export function getStartOfWeek(date: Date, firstDayOfWeek: DayOfWeek = 1) { - const value = new Date(date); - - while (value.getDay() !== firstDayOfWeek) { - value.setDate(value.getDate() - 1); + let value = dayjs(date); + while (value.day() !== firstDayOfWeek) { + value = value.subtract(1, 'day'); } - return value; + return value.toDate(); } diff --git a/packages/@mantine/dates/src/components/Month/index.ts b/packages/@mantine/dates/src/components/Month/index.ts index 19601bc6464..312e6ad3986 100644 --- a/packages/@mantine/dates/src/components/Month/index.ts +++ b/packages/@mantine/dates/src/components/Month/index.ts @@ -1,7 +1,6 @@ export { getEndOfWeek } from './get-end-of-week/get-end-of-week'; export { getStartOfWeek } from './get-start-of-week/get-start-of-week'; export { getMonthDays } from './get-month-days/get-month-days'; -export { isSameMonth } from './is-same-month/is-same-month'; export { Month } from './Month'; export type { MonthProps, MonthSettings, MonthStylesNames, MonthFactory } from './Month'; diff --git a/packages/@mantine/dates/src/components/Month/is-same-month/is-same-month.test.ts b/packages/@mantine/dates/src/components/Month/is-same-month/is-same-month.test.ts deleted file mode 100644 index dfa20b5e15a..00000000000 --- a/packages/@mantine/dates/src/components/Month/is-same-month/is-same-month.test.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { isSameMonth } from './is-same-month'; - -describe('@mantine/dates/is-same-month', () => { - it('detects same month', () => { - expect(isSameMonth(new Date(2021, 2, 1), new Date(2021, 2, 2))).toBe(true); - expect(isSameMonth(new Date(2021, 3, 1), new Date(2021, 2, 2))).toBe(false); - expect(isSameMonth(new Date(2022, 2, 2), new Date(2021, 2, 2))).toBe(false); - }); -}); diff --git a/packages/@mantine/dates/src/components/Month/is-same-month/is-same-month.ts b/packages/@mantine/dates/src/components/Month/is-same-month/is-same-month.ts deleted file mode 100644 index 3391ec4ee99..00000000000 --- a/packages/@mantine/dates/src/components/Month/is-same-month/is-same-month.ts +++ /dev/null @@ -1,5 +0,0 @@ -export function isSameMonth(date: Date, comparison: Date) { - return ( - date.getFullYear() === comparison.getFullYear() && date.getMonth() === comparison.getMonth() - ); -}