diff --git a/package.json b/package.json index a75ad4429..039370846 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,7 @@ "@react-aria/interactions": "^3.5.1", "@react-aria/spinbutton": "^3.0.1", "@react-aria/utils": "^3.8.2", - "dayjs": "^1.10.6", + "date-fns": "^2.23.0", "reakit-system": "^0.15.2", "reakit-utils": "^0.15.2", "reakit-warning": "^0.6.2" diff --git a/src/calendar/CalendarState.ts b/src/calendar/CalendarState.ts index 5e4d63961..dd4736383 100644 --- a/src/calendar/CalendarState.ts +++ b/src/calendar/CalendarState.ts @@ -67,7 +67,7 @@ export function useCalendarState( const weekStart = useWeekStart(); const weekDays = useWeekDays(weekStart); - let monthStartsAt = (startOfMonth(currentMonth).get("day") - weekStart) % 7; + let monthStartsAt = (startOfMonth(currentMonth).getDay() - weekStart) % 7; if (monthStartsAt < 0) { monthStartsAt += 7; } @@ -93,7 +93,7 @@ export function useCalendarState( if (isInvalidDateRange(date)) return; if (!isSameMonth(date, currentMonth)) { - setCurrentMonth(startOfMonth(date).toDate()); + setCurrentMonth(startOfMonth(date)); } setFocusedDate(date); @@ -184,10 +184,10 @@ export function useCalendarState( focusCell(subMonths(focusedDate, 1)); }, focusStartOfMonth() { - focusCell(startOfMonth(focusedDate).toDate()); + focusCell(startOfMonth(focusedDate)); }, focusEndOfMonth() { - focusCell(endOfMonth(startOfDay(focusedDate).toDate()).toDate()); + focusCell(endOfMonth(startOfDay(focusedDate))); }, focusNextYear() { focusCell(addYears(focusedDate, 1)); diff --git a/src/calendar/helpers/index.ts b/src/calendar/helpers/index.ts index cf331e02f..dd2f38515 100644 --- a/src/calendar/helpers/index.ts +++ b/src/calendar/helpers/index.ts @@ -2,20 +2,18 @@ * All credit goes to [React Spectrum](https://github.com/adobe/react-spectrum) * for these utils inspiration */ -import dayjs from "dayjs"; import { RangeValue } from "@react-types/shared"; import { useDateFormatter } from "@react-aria/i18n"; -import { toUTCString } from "../../utils"; +import { toUTCString, setDay } from "../../utils"; export function useWeekDays(weekStart: number) { const dayFormatter = useDateFormatter({ weekday: "short" }); const dayFormatterLong = useDateFormatter({ weekday: "long" }); return [0, 1, 2, 3, 4, 5, 6].map(index => { - const dateDay = dayjs(Date.now()) - .set("day", (index + weekStart) % 7) - .toDate(); + const dateDay = setDay(Date.now(), (index + weekStart) % 7); + const day = dayFormatter.format(dateDay); const dayLong = dayFormatterLong.format(dateDay); return { title: dayLong, abbr: day } as const; diff --git a/src/timepicker/TimePickerState.ts b/src/timepicker/TimePickerState.ts index 2542257e5..e3cb808b9 100644 --- a/src/timepicker/TimePickerState.ts +++ b/src/timepicker/TimePickerState.ts @@ -7,7 +7,7 @@ import { SegmentInitialState, useSegmentState } from "../segment"; import { useTimePickerColumnState } from "./TimePickerColumnState"; import { PickerBaseInitialState, usePickerBaseState } from "../picker-base"; import { announce } from "../utils/LiveAnnouncer"; -import { formatDate } from "../utils"; +import { useDateFormatter } from "@react-aria/i18n"; export type TimePickerInitialState = PickerBaseInitialState & ValueBase & @@ -101,8 +101,11 @@ export const useTimePickerState = (props: TimePickerInitialState = {}) => { const hours = [...new Array(13).keys()].slice(1); const minutes = [...new Array(60).keys()]; const meridies = ["AM", "PM"]; + + const dateFormatter = useDateFormatter({ timeStyle: "medium" }); + const announceSelectedDate = () => { - announce(`Selected Time: ${formatDate(time, "h:m a")}`); + announce(`Selected Time: ${dateFormatter.format(time)}`); }; React.useEffect(() => { diff --git a/src/timepicker/helpers.ts b/src/timepicker/helpers.ts index e0bbc461e..ed7a03b8d 100644 --- a/src/timepicker/helpers.ts +++ b/src/timepicker/helpers.ts @@ -1,4 +1,3 @@ -import { formatDate } from "../utils"; import { isString } from "@chakra-ui/utils"; import { ColumnType } from "./TimePickerColumnState"; @@ -28,7 +27,7 @@ export function parseTime(timeValue: string | undefined) { } export function stringifyTime(date: Date) { - return formatDate(date, "HH:mm:ss"); + return date.toString().slice(16, 24); } export function getSelectedValueFromDate(date: Date, type: ColumnType) { diff --git a/src/utils/date.ts b/src/utils/date.ts index 4d9c314e6..0b97d4373 100644 --- a/src/utils/date.ts +++ b/src/utils/date.ts @@ -1,4 +1,3 @@ -import dayjs from "dayjs"; import { RangeValue } from "@react-types/shared"; export const toUTCString = (date: Date) => { @@ -9,85 +8,33 @@ export const toUTCRangeString = (date: RangeValue) => { return { start: toUTCString(date.start), end: toUTCString(date.end) }; }; -export const subDays = (date: Date, amount: number) => - dayjs(date).subtract(amount, "day").toDate(); - -export const subMonths = (date: Date, amount: number) => - dayjs(date).subtract(amount, "months").toDate(); - -export const subWeeks = (date: Date, amount: number) => - dayjs(date).subtract(amount, "weeks").toDate(); - -export const subYears = (date: Date, amount: number) => - dayjs(date).subtract(amount, "years").toDate(); - -export const addDays = (date: Date, amount: number) => - dayjs(date).add(amount, "day").toDate(); - -export const addMonths = (date: Date, amount: number) => - dayjs(date).add(amount, "months").toDate(); - -export const addYears = (date: Date, amount: number) => - dayjs(date).add(amount, "years").toDate(); - -export const addWeeks = (date: Date, amount: number) => - dayjs(date).add(amount, "weeks").toDate(); - -export const getDate = (date: Date) => dayjs(date).get("date"); - -export const getHours = (date: Date) => dayjs(date).get("hours"); - -export const getMinutes = (date: Date) => dayjs(date).get("minutes"); - -export const getMonth = (date: Date) => dayjs(date).get("months"); - -export const getSeconds = (date: Date) => dayjs(date).get("seconds"); - -export const getYear = (date: Date) => dayjs(date).get("years"); - -export const setDate = (date: Date, value: number) => - dayjs(date).set("date", value).toDate(); - -export const setHours = (date: Date, value: number) => - dayjs(date).set("hour", value).toDate(); - -export const setMinutes = (date: Date, value: number) => - dayjs(date).set("minute", value).toDate(); - -export const setSeconds = (date: Date, value: number) => - dayjs(date).set("second", value).toDate(); - -export const setMonth = (date: Date, value: number) => - dayjs(date).set("month", value).toDate(); - -export const setYear = (date: Date, value: number) => - dayjs(date).set("year", value).toDate(); - -export const startOfMonth = (date: Date) => { - return dayjs(date).startOf("month"); -}; - -export const startOfDay = (date: Date) => { - return dayjs(date).startOf("day"); -}; - -export const endOfMonth = (date: Date) => { - return dayjs(date).endOf("month"); -}; - -export const getDaysInMonth = (date: Date) => dayjs(date).daysInMonth(); - -export const isSameMonth = (date1: Date, date2: Date) => - dayjs(date1).isSame(date2, "month"); - -export const isSameDay = (date1: Date, date2: Date) => - dayjs(date1).isSame(date2, "day"); - -export const isWeekend = (date: Date) => { - const day = dayjs(date).get("day"); - return day === 0 || day === 6; -}; - -export const formatDate = (date: Date, fmt: string) => { - return dayjs(date).format(fmt); -}; +export { + subDays, + subMonths, + subWeeks, + subYears, + addDays, + addMonths, + addYears, + addWeeks, + getDate, + getHours, + getMinutes, + getMonth, + getSeconds, + getYear, + setDate, + setDay, + setHours, + setMinutes, + setSeconds, + setMonth, + setYear, + startOfMonth, + startOfDay, + endOfMonth, + getDaysInMonth, + isSameMonth, + isSameDay, + isWeekend, +} from "date-fns"; diff --git a/yarn.lock b/yarn.lock index c85f746a5..ffe8766b0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7724,6 +7724,11 @@ date-fns@^2.16.1: resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.22.1.tgz#1e5af959831ebb1d82992bf67b765052d8f0efc4" integrity sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg== +date-fns@^2.23.0: + version "2.23.0" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.23.0.tgz#4e886c941659af0cf7b30fafdd1eaa37e88788a9" + integrity sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA== + dateformat@^3.0.0: version "3.0.3" resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"