replace moment.js with date-fns

Author: KoolADE85

components/dash-core-components/package-lock.json

@@ -52,7 +52,7 @@
     "highlight.js": "^11.8.0",
     "js-search": "^2.0.1",
     "mathjax": "^3.2.2",
-    "moment": "^2.29.4",
+    "date-fns": "^4.1.0",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "prop-types": "^15.8.1",
     "ramda": "^0.30.1",

components/dash-core-components/package.json

@@ -7,6 +7,7 @@ import {
     ArrowLeftIcon,
     ArrowRightIcon,
 } from '@radix-ui/react-icons';
+import {addDays, subDays} from 'date-fns';
 import AutosizeInput from 'react-input-autosize';
 import Calendar, {CalendarHandle} from '../utils/calendar/Calendar';
 import {DatePickerRangeProps, CalendarDirection} from '../types';
@@ -19,7 +20,6 @@ import {
 } from '../utils/calendar/helpers';
 import '../components/css/datepickers.css';
 import uuid from 'uniqid';
-import moment from 'moment';
 
 const DatePickerRange = ({
     id,
@@ -81,12 +81,8 @@ const DatePickerRange = ({
         ) {
             const minimumNightsDates: Date[] = [];
             for (let i = 1; i < minimum_nights; i++) {
-                minimumNightsDates.push(
-                    moment(internalStartDate).add(i, 'day').toDate()
-                );
-                minimumNightsDates.push(
-                    moment(internalStartDate).subtract(i, 'day').toDate()
-                );
+                minimumNightsDates.push(addDays(internalStartDate, i));
+                minimumNightsDates.push(subDays(internalStartDate, i));
             }
             return [...baseDates, ...minimumNightsDates];
         }

components/dash-core-components/src/fragments/DatePickerRange.tsx

@@ -1,12 +1,14 @@
-import moment from 'moment';
+import {format, startOfDay, parseISO} from 'date-fns';
 import {isNil} from 'ramda';
 
 export default {
     extract: (propValue?: string) => {
-        if (!isNil(propValue)) {
-            return moment(propValue).startOf('day').format('YYYY-MM-DD');
+        if (isNil(propValue)) {
+            return propValue;
         }
-        return propValue;
+
+        const parsed = parseISO(propValue);
+        return format(startOfDay(parsed), 'yyyy-MM-dd');
     },
     apply: (storedValue?: string) => storedValue,
 };

components/dash-core-components/src/utils/DatePickerPersistence.ts

@@ -7,7 +7,7 @@ import React, {
     useState,
     forwardRef,
 } from 'react';
-import moment from 'moment';
+import {addMonths, subMonths} from 'date-fns';
 import {
     ArrowUpIcon,
     ArrowDownIcon,
@@ -92,7 +92,7 @@ const CalendarComponent = ({
     }, [activeYear, monthFormat]);
 
     useImperativeHandle(forwardedRef, () => ({
-        focusDate: (date = moment([activeYear, activeMonth, 1]).toDate()) => {
+        focusDate: (date = new Date(activeYear, activeMonth, 1)) => {
             setFocusedDate(date);
         },
         setVisibleDate: (date: Date) => {
@@ -112,15 +112,9 @@ const CalendarComponent = ({
         prevFocusedDateRef.current = focusedDate;
 
         const halfRange = Math.floor((numberOfMonthsShown - 1) / 2);
-        const activeMonthStart = moment([activeYear, activeMonth, 1]);
-        const visibleStart = activeMonthStart
-            .clone()
-            .subtract(halfRange, 'months')
-            .toDate();
-        const visibleEnd = activeMonthStart
-            .clone()
-            .add(halfRange, 'months')
-            .toDate();
+        const activeMonthStart = new Date(activeYear, activeMonth, 1);
+        const visibleStart = subMonths(activeMonthStart, halfRange);
+        const visibleEnd = addMonths(activeMonthStart, halfRange);
 
         const focusedMonthStart = new Date(
             focusedDate.getFullYear(),
@@ -220,18 +214,17 @@ const CalendarComponent = ({
 
     const changeMonthBy = useCallback(
         (months: number) => {
-            const currentDate = moment([activeYear, activeMonth, 1]);
+            const currentDate = new Date(activeYear, activeMonth, 1);
 
             // In RTL mode, directions are reversed
             const actualMonths =
                 direction === CalendarDirection.RightToLeft ? -months : months;
 
-            const newDate = currentDate.clone().add(actualMonths, 'month');
-            const newMonthStart = newDate.toDate();
+            const newMonthStart = addMonths(currentDate, actualMonths);
 
             if (isDateInRange(newMonthStart, minDateAllowed, maxDateAllowed)) {
-                setActiveYear(newDate.year());
-                setActiveMonth(newDate.month());
+                setActiveYear(newMonthStart.getFullYear());
+                setActiveMonth(newMonthStart.getMonth());
             }
         },
         [activeYear, activeMonth, minDateAllowed, maxDateAllowed, direction]
@@ -272,11 +265,8 @@ const CalendarComponent = ({
 
     const canChangeMonthBy = useCallback(
         (months: number) => {
-            const currentDate = moment([activeYear, activeMonth, 1]);
-            const targetMonth = currentDate
-                .clone()
-                .add(months, 'month')
-                .toDate();
+            const currentDate = new Date(activeYear, activeMonth, 1);
+            const targetMonth = addMonths(currentDate, months);
 
             return isDateInRange(targetMonth, minDateAllowed, maxDateAllowed);
         },
@@ -350,15 +340,15 @@ const CalendarComponent = ({
                     // Center the view: start from (numberOfMonthsShown - 1) / 2 months before activeMonth
                     const offset =
                         i - Math.floor((numberOfMonthsShown - 1) / 2);
-                    const monthDate = moment([activeYear, activeMonth, 1]).add(
-                        offset,
-                        'months'
+                    const monthDate = addMonths(
+                        new Date(activeYear, activeMonth, 1),
+                        offset
                     );
                     return (
                         <CalendarMonth
                             key={i}
-                            year={monthDate.year()}
-                            month={monthDate.month()}
+                            year={monthDate.getFullYear()}
+                            month={monthDate.getMonth()}
                             minDateAllowed={minDateAllowed}
                             maxDateAllowed={maxDateAllowed}
                             disabledDates={disabledDates}

components/dash-core-components/src/utils/calendar/Calendar.tsx

@@ -1,5 +1,17 @@
 import React, {useCallback, useMemo} from 'react';
-import moment from 'moment';
+import {
+    addDays,
+    subDays,
+    addWeeks,
+    subWeeks,
+    addMonths,
+    subMonths,
+    setDay,
+    startOfWeek,
+    endOfWeek,
+    format,
+} from 'date-fns';
+import type {Day} from 'date-fns';
 import CalendarDay from './CalendarDay';
 import CalendarDayPadding from './CalendarDayPadding';
 import {createMonthGrid} from './createMonthGrid';
@@ -26,7 +38,7 @@ type CalendarMonthProps = {
     onSelectionEnd?: (date: Date) => void;
     onDayFocused?: (date: Date) => void;
     onDaysHighlighted?: (date: Date) => void;
-    firstDayOfWeek?: number; // 0-7
+    firstDayOfWeek?: Day;
     showOutsideDays?: boolean;
     daySize?: number;
     monthFormat?: string;
@@ -80,17 +92,15 @@ export const CalendarMonth = ({
     );
 
     const daysOfTheWeek = useMemo(() => {
-        return Array.from({length: 7}, (_, i) =>
-            moment()
-                .day((i + firstDayOfWeek) % 7)
-                .format('dd')
-        );
+        return Array.from({length: 7}, (_, i) => {
+            const date = setDay(new Date(), (i + firstDayOfWeek) % 7);
+            return format(date, 'EEEEEE');
+        });
     }, [firstDayOfWeek]);
 
     const handleKeyDown = useCallback(
         (e: React.KeyboardEvent, date: Date) => {
-            const m = moment(date);
-            let newDate: moment.Moment | null = null;
+            let newDate: Date | null = null;
 
             switch (e.key) {
                 case ' ':
@@ -107,52 +117,41 @@ export const CalendarMonth = ({
                 case 'ArrowRight':
                     newDate =
                         direction === CalendarDirection.RightToLeft
-                            ? m.subtract(1, 'day')
-                            : m.add(1, 'day');
+                            ? subDays(date, 1)
+                            : addDays(date, 1);
                     break;
                 case 'ArrowLeft':
                     newDate =
                         direction === CalendarDirection.RightToLeft
-                            ? m.add(1, 'day')
-                            : m.subtract(1, 'day');
+                            ? addDays(date, 1)
+                            : subDays(date, 1);
                     break;
                 case 'ArrowDown':
-                    newDate = m.add(1, 'week');
+                    newDate = addWeeks(date, 1);
                     break;
                 case 'ArrowUp':
-                    newDate = m.subtract(1, 'week');
+                    newDate = subWeeks(date, 1);
                     break;
                 case 'PageDown':
-                    newDate = m.add(1, 'month');
+                    newDate = addMonths(date, 1);
                     break;
                 case 'PageUp':
-                    newDate = m.subtract(1, 'month');
+                    newDate = subMonths(date, 1);
                     break;
                 case 'Home':
-                    // Navigate to week start (respecting firstDayOfWeek)
-                    newDate = m.clone().day(firstDayOfWeek);
-                    // If we went forward, adjust backward to current week
-                    if (newDate.isAfter(m, 'day')) {
-                        newDate.subtract(1, 'week');
-                    }
+                    newDate = startOfWeek(date, {weekStartsOn: firstDayOfWeek});
                     break;
                 case 'End':
-                    // Navigate to week end (respecting firstDayOfWeek)
-                    newDate = m.clone().day((firstDayOfWeek + 6) % 7);
-                    // If we went backward, adjust forward to current week
-                    if (newDate.isBefore(m, 'day')) {
-                        newDate.add(1, 'week');
-                    }
+                    newDate = endOfWeek(date, {weekStartsOn: firstDayOfWeek});
                     break;
                 default:
                     return;
             }
 
             if (newDate) {
                 e.preventDefault();
-                const newDateObj = newDate.toDate();
-                if (isDateInRange(newDateObj, minDateAllowed, maxDateAllowed)) {
-                    onDayFocused?.(newDateObj);
+                if (isDateInRange(newDate, minDateAllowed, maxDateAllowed)) {
+                    onDayFocused?.(newDate);
                 }
             }
         },

components/dash-core-components/src/utils/calendar/CalendarMonth.tsx

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import {getDay, getDaysInMonth, addDays, getMonth, type Day} from 'date-fns';
 
 /**
  * Creates a 2D array of Date objects representing a calendar month grid.
@@ -7,33 +7,22 @@ import moment from 'moment';
 export const createMonthGrid = (
     year: number,
     month: number,
-    firstDayOfWeek: number,
+    firstDayOfWeek: Day,
     showOutsideDays = true
 ): (Date | null)[][] => {
-    const firstDay = moment([year, month, 1]);
-    const offset = (firstDay.day() - firstDayOfWeek + 7) % 7;
-    const daysInMonth = firstDay.daysInMonth();
-    const weeksNeeded = Math.ceil((offset + daysInMonth) / 7);
-    const startDate = firstDay.clone().subtract(offset, 'days');
+    const firstDay = new Date(year, month, 1);
+    const offset = (getDay(firstDay) - firstDayOfWeek + 7) % 7;
+    const startDate = addDays(firstDay, -offset);
+    const weeksNeeded = Math.ceil((offset + getDaysInMonth(firstDay)) / 7);
 
-    const grid: (Date | null)[][] = [];
+    return Array.from({length: 6}, (_, week) =>
+        Array.from({length: 7}, (_, day) => {
+            if (week >= weeksNeeded) {
+                return null;
+            }
 
-    for (let week = 0; week < weeksNeeded; week++) {
-        grid.push(
-            Array.from({length: 7}, (_, day) => {
-                const date = startDate.clone().add(week * 7 + day, 'days');
-                if (!showOutsideDays && date.month() !== month) {
-                    return null;
-                }
-                return date.toDate();
-            })
-        );
-    }
-
-    // Pad with empty rows to always have 6 rows total
-    while (grid.length < 6) {
-        grid.push(Array.from({length: 7}, () => null));
-    }
-
-    return grid;
+            const date = addDays(startDate, week * 7 + day);
+            return showOutsideDays || getMonth(date) === month ? date : null;
+        })
+    );
 };