replace moment with dayjs

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## [11.0.0] (IN PROGRESS)
 
 * Package Record - Titlelist Display - Add Column for Tags and few column width adjustments. (UIEH-1449)
+* Replace `moment` usage with `dayjs`. (UIEH-1407)
 
 ## [11.0.0] (https://github.com/folio-org/ui-eholdings/tree/v11.0.0) (2025-03-13)
 

package.json

@@ -35,8 +35,6 @@
     "husky": "^1.3.1",
     "identity-obj-proxy": "^3.0.0",
     "lodash": "^4.17.4",
-    "moment": "^2.24.0",
-    "moment-range": "^3.0.3",
     "qs": "^6.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/package/_fields/custom-coverage/package-coverage-fields.js

@@ -7,14 +7,15 @@ import {
   injectIntl,
 } from 'react-intl';
 
-import moment from 'moment';
 import isEqual from 'lodash/isEqual';
 
 import {
   Datepicker,
   RepeatableField,
   Col,
   Row,
+  dayjs,
+  getLocaleDateFormat,
 } from '@folio/stripes/components';
 import {
   BACKEND_DATE_STANDARD,
@@ -32,7 +33,7 @@ class PackageCoverageFields extends Component {
     values?.forEach(({ beginCoverage, endCoverage }) => {
       const errors = {};
 
-      if (endCoverage && !moment.utc(endCoverage).isAfter(moment.utc(beginCoverage))) {
+      if (endCoverage && !dayjs.utc(endCoverage).isAfter(dayjs.utc(beginCoverage))) {
         errors.beginCoverage = <FormattedMessage id="ui-eholdings.validate.errors.dateRange.startDateBeforeEndDate" />;
       }
 
@@ -44,11 +45,10 @@ class PackageCoverageFields extends Component {
 
   validateCoverageDate = (value) => {
     const { intl } = this.props;
-    moment.locale(intl.locale);
-    const dateFormat = moment.localeData()._longDateFormat.L;
+    const dateFormat = getLocaleDateFormat({ intl });
     let errors;
 
-    if (value && !moment.utc(value).isValid()) {
+    if (value && !dayjs.utc(value).isValid()) {
       errors = (
         <FormattedMessage
           id="ui-eholdings.validate.errors.dateRange.format"

src/components/resource/_fields/validate-date-range.js

@@ -1,24 +1,22 @@
-import {
-  FormattedMessage,
-} from 'react-intl';
-import Moment from 'moment';
-import { extendMoment } from 'moment-range';
-
-import { FormattedDate } from '@folio/stripes/components';
+import { FormattedMessage } from 'react-intl';
 
-const moment = extendMoment(Moment);
+import {
+  FormattedDate,
+  dayjs,
+  DayRange,
+  getLocaleDateFormat,
+} from '@folio/stripes/components';
 
 /**
    * Validator to ensure begin date is present and entered dates are valid
    * @param {} dateRange - coverage date range to validate
    * @returns {} - an error object if errors are found, or `undefined` otherwise
    */
 const validateDateFormat = (dateRange, locale) => {
-  moment.locale(locale);
-  const dateFormat = moment.localeData()._longDateFormat.L;
+  const dateFormat = getLocaleDateFormat({ intl: { locale } });
   const message = <FormattedMessage id="ui-eholdings.validate.errors.dateRange.format" values={{ dateFormat }} />;
 
-  if (!dateRange.beginCoverage || !moment.utc(dateRange.beginCoverage).isValid()) {
+  if (!dateRange.beginCoverage || !dayjs.utc(dateRange.beginCoverage).isValid()) {
     return { beginCoverage: message };
   }
 
@@ -33,7 +31,7 @@ const validateDateFormat = (dateRange, locale) => {
 const validateStartDateBeforeEndDate = (dateRange) => {
   const message = <FormattedMessage id="ui-eholdings.validate.errors.dateRange.startDateBeforeEndDate" />;
 
-  if (dateRange.endCoverage && moment.utc(dateRange.beginCoverage).isAfter(moment.utc(dateRange.endCoverage))) {
+  if (dateRange.endCoverage && dayjs.utc(dateRange.beginCoverage).isAfter(dayjs.utc(dateRange.endCoverage))) {
     return { beginCoverage: message };
   }
 
@@ -49,11 +47,11 @@ const validateStartDateBeforeEndDate = (dateRange) => {
  * @returns {} - an error object if errors are found, or `undefined` otherwise
  */
 const validateNoRangeOverlaps = (dateRange, customCoverages, index) => {
-  const present = moment.utc('9999-09-09T05:00:00.000Z');
+  const present = dayjs.utc('9999-09-09T05:00:00.000Z');
 
-  const beginCoverageDate = moment.utc(dateRange.beginCoverage);
-  const endCoverageDate = dateRange.endCoverage ? moment.utc(dateRange.endCoverage) : present;
-  const coverageRange = moment.range(beginCoverageDate, endCoverageDate);
+  const beginCoverageDate = dayjs.utc(dateRange.beginCoverage);
+  const endCoverageDate = dateRange.endCoverage ? dayjs.utc(dateRange.endCoverage) : present;
+  const coverageRange = new DayRange(beginCoverageDate, endCoverageDate);
 
   for (let overlapIndex = 0, len = customCoverages.length; overlapIndex < len; overlapIndex++) {
     const overlapRange = customCoverages[overlapIndex];
@@ -63,9 +61,9 @@ const validateNoRangeOverlaps = (dateRange, customCoverages, index) => {
       continue; // eslint-disable-line no-continue
     }
 
-    const overlapCoverageBeginDate = moment.utc(overlapRange.beginCoverage);
-    const overlapCoverageEndDate = overlapRange.endCoverage ? moment.utc(overlapRange.endCoverage) : present;
-    const overlapCoverageRange = moment.range(overlapCoverageBeginDate, overlapCoverageEndDate);
+    const overlapCoverageBeginDate = dayjs.utc(overlapRange.beginCoverage);
+    const overlapCoverageEndDate = overlapRange.endCoverage ? dayjs.utc(overlapRange.endCoverage) : present;
+    const overlapCoverageRange = new DayRange(overlapCoverageBeginDate, overlapCoverageEndDate);
 
     const startDate =
       <FormattedDate
@@ -89,7 +87,7 @@ const validateNoRangeOverlaps = (dateRange, customCoverages, index) => {
     const message = <FormattedMessage id="ui-eholdings.validate.errors.dateRange.overlap" values={{ startDate, endDate }} />;
 
     if (overlapCoverageRange.overlaps(coverageRange)
-      || overlapCoverageRange.isEqual(coverageRange)
+      || overlapCoverageRange.isSame(coverageRange)
       || overlapCoverageRange.contains(coverageRange)) {
       return { beginCoverage: message, endCoverage: message };
     }
@@ -109,16 +107,16 @@ const validateWithinPackageRange = (resourceDateRange, packageDateRange) => {
     beginCoverage: packageBeginCoverage,
     endCoverage: packageEndCoverage
   } = packageDateRange;
-  // javascript/moment has no mechanism for "infinite", so we
+  // javascript/dayjs has no mechanism for "infinite", so we
   // use an absurd future date to represent the concept of "present"
-  const present = moment.utc('9999-09-09T05:00:00.000Z');
+  const present = dayjs.utc('9999-09-09T05:00:00.000Z');
   if (packageBeginCoverage) {
-    const beginCoverageDate = moment.utc(resourceDateRange.beginCoverage);
-    const endCoverageDate = resourceDateRange.endCoverage ? moment.utc(resourceDateRange.endCoverage) : present;
+    const beginCoverageDate = dayjs.utc(resourceDateRange.beginCoverage);
+    const endCoverageDate = resourceDateRange.endCoverage ? dayjs.utc(resourceDateRange.endCoverage) : present;
 
-    const packageBeginCoverageDate = moment.utc(packageBeginCoverage);
-    const packageEndCoverageDate = packageEndCoverage ? moment.utc(packageEndCoverage) : moment.utc();
-    const packageRange = moment.range(packageBeginCoverageDate, packageEndCoverageDate);
+    const packageBeginCoverageDate = dayjs.utc(packageBeginCoverage);
+    const packageEndCoverageDate = packageEndCoverage ? dayjs.utc(packageEndCoverage) : dayjs.utc();
+    const packageRange = new DayRange(packageBeginCoverageDate, packageEndCoverageDate);
 
     const startDate =
       <FormattedDate

src/components/resource/components/edit/coverage-settings/edit-coverage-settings.test.js

@@ -148,7 +148,7 @@ describe('Given EditCoverageSettings', () => {
     });
   });
 
-  describe('when setting incorrect coverage dates', () => {
+  describe('when setting start coverage date after end coverage date', () => {
     it('should show error message', () => {
       const {
         getByLabelText,
@@ -165,4 +165,40 @@ describe('Given EditCoverageSettings', () => {
       expect(getByText('ui-eholdings.validate.errors.dateRange.startDateBeforeEndDate')).toBeDefined();
     });
   });
+
+  describe('when setting coverage dates are outside of package coverage dates', () => {
+    it('should show error message', () => {
+      const {
+        getByLabelText,
+        getByText,
+      } = renderCoverageSettings();
+
+      const startDateInput = getByLabelText('ui-eholdings.date.startDate');
+      const endDateInput = getByLabelText('ui-eholdings.date.endDate');
+
+      fireEvent.change(startDateInput, { target: { value: '01/02/2021' } });
+      fireEvent.change(endDateInput, { target: { value: '02/01/2021' } });
+      fireEvent.blur(endDateInput);
+
+      expect(getByText('ui-eholdings.validate.errors.dateRange.packageRange')).toBeDefined();
+    });
+  });
+
+  describe('when setting coverage dates are within package coverage dates', () => {
+    it('should show error message', () => {
+      const {
+        getByLabelText,
+        queryByText,
+      } = renderCoverageSettings();
+
+      const startDateInput = getByLabelText('ui-eholdings.date.startDate');
+      const endDateInput = getByLabelText('ui-eholdings.date.endDate');
+
+      fireEvent.change(startDateInput, { target: { value: '01/01/2021' } });
+      fireEvent.change(endDateInput, { target: { value: '01/31/2021' } });
+      fireEvent.blur(endDateInput);
+
+      expect(queryByText('ui-eholdings.validate.errors.dateRange.packageRange')).not.toBeInTheDocument();
+    });
+  });
 });

src/components/settings/settings-usage-consolidation/settings-usage-consolidation.js

@@ -12,14 +12,14 @@ import {
   FormattedMessage,
   useIntl,
 } from 'react-intl';
-import moment from 'moment';
 
 import {
   useStripes,
 } from '@folio/stripes/core';
 import {
   Select,
   TextField,
+  dayjs,
 } from '@folio/stripes/components';
 
 import SettingsForm from '../settings-form';
@@ -134,7 +134,7 @@ const SettingsUsageConsolidation = ({
 
   const monthDataOptions = MONTHS.map((month, index) => ({
     value: month.toLowerCase().substring(0, 3),
-    label: moment.months()[index],
+    label: dayjs.months()[index],
   }));
 
   const parseUsageConsolidationId = value => {

src/components/utilities.js

@@ -1,4 +1,3 @@
-import moment from 'moment';
 import queryString from 'qs';
 import {
   get,
@@ -8,7 +7,10 @@ import {
   FormattedMessage,
 } from 'react-intl';
 
-import { FormattedDate } from '@folio/stripes/components';
+import {
+  FormattedDate,
+  dayjs,
+} from '@folio/stripes/components';
 
 import {
   searchTypes,
@@ -68,7 +70,7 @@ export function formatCoverageYear({ beginCoverage, endCoverage }) {
 
   if (!startYear) {
     return endCoverage ? endYear : '';
-  } else if ((moment.utc(beginCoverage).format('YYYY') === moment.utc(endCoverage).format('YYYY')) || (!endYear)) {
+  } else if ((dayjs.utc(beginCoverage).format('YYYY') === dayjs.utc(endCoverage).format('YYYY')) || (!endYear)) {
     return startYear;
   } else {
     return <>{startYear}{' - '}{endYear}</>;
@@ -77,10 +79,10 @@ export function formatCoverageYear({ beginCoverage, endCoverage }) {
 
 export function isValidCoverage(coverageObj) {
   if (coverageObj.beginCoverage) {
-    if (!moment.utc(coverageObj.beginCoverage, 'YYYY-MM-DD').isValid()) { return false; }
+    if (!dayjs.utc(coverageObj.beginCoverage, 'YYYY-MM-DD').isValid()) { return false; }
   }
   if (coverageObj.endCoverage) {
-    if (!moment.utc(coverageObj.endCoverage, 'YYYY-MM-DD').isValid()) { return false; }
+    if (!dayjs.utc(coverageObj.endCoverage, 'YYYY-MM-DD').isValid()) { return false; }
   }
   return true;
 }
@@ -274,7 +276,7 @@ export const getFullName = user => {
 
 export const parseDate = value => value;
 
-export const formatDate = value => (value ? moment.utc(value) : '');
+export const formatDate = value => (value ? dayjs.utc(value) : '');
 
 export const combineMCLProps = defaultProps => customProps => {
   return {

src/features/usage-consolidation-accordion/usage-consolidation-accordion/usage-consolidation-accordion.js

@@ -4,7 +4,6 @@ import {
 } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import moment from 'moment';
 import noop from 'lodash/noop';
 
 import { useStripes } from '@folio/stripes/core';
@@ -13,6 +12,7 @@ import {
   Headline,
   InfoPopover,
   Spinner,
+  dayjs,
 } from '@folio/stripes/components';
 
 import Toaster from '../../../components/toaster';
@@ -67,7 +67,7 @@ const UsageConsolidationAccordion = ({
   const { isLoading: isCostPerUseDataLoading } = costPerUseData;
 
   const filtersInitialState = {
-    year: moment().year(),
+    year: dayjs().year(),
     platformType: usageConsolidation.data.platformType,
   };
 

src/features/usage-consolidation-accordion/usage-consolidation-filters.js

@@ -7,7 +7,6 @@ import {
   Form,
   Field,
 } from 'react-final-form';
-import moment from 'moment';
 import {
   useIntl,
   FormattedMessage,
@@ -19,6 +18,7 @@ import {
   Row,
   Col,
   Button,
+  dayjs,
 } from '@folio/stripes/components';
 
 import { platformTypes } from '../../constants';
@@ -45,7 +45,7 @@ const UsageConsolidationFilters = ({
     }
   }, [yearField]);
 
-  const currentYear = moment().year();
+  const currentYear = dayjs().year();
   const last5Years = new Array(5)
     .fill(currentYear)
     .map((year, index) => year - index);

src/routes/package-create-route/package-create-route.js

@@ -1,10 +1,11 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactRouterPropTypes from 'react-router-prop-types';
-import moment from 'moment';
-import { TitleManager } from '@folio/stripes/core';
 import { FormattedMessage } from 'react-intl';
 
+import { TitleManager } from '@folio/stripes/core';
+import { dayjs } from '@folio/stripes/components';
+
 import View from '../../components/package/create';
 
 import { accessTypesReduxStateShape } from '../../constants';
@@ -41,9 +42,9 @@ export default class PackageCreateRoute extends Component {
     if (values?.customCoverages?.[0]) {
       attrs.customCoverage = {
         beginCoverage: !values.customCoverages[0].beginCoverage ? '' :
-          moment.utc(values.customCoverages[0].beginCoverage).format('YYYY-MM-DD'),
+          dayjs.utc(values.customCoverages[0].beginCoverage).format('YYYY-MM-DD'),
         endCoverage: !values.customCoverages[0].endCoverage ? '' :
-          moment.utc(values.customCoverages[0].endCoverage).format('YYYY-MM-DD')
+          dayjs.utc(values.customCoverages[0].endCoverage).format('YYYY-MM-DD')
       };
     }
 

src/routes/package-edit-route/package-edit-route.js

@@ -2,10 +2,10 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactRouterPropTypes from 'react-router-prop-types';
 import isEqual from 'lodash/isEqual';
-import moment from 'moment';
 import { FormattedMessage } from 'react-intl';
 
 import { TitleManager } from '@folio/stripes/core';
+import { dayjs } from '@folio/stripes/components';
 
 import View from '../../components/package/package-edit';
 
@@ -135,8 +135,8 @@ class PackageEditRoute extends Component {
     let endCoverage = '';
 
     if (values.customCoverages[0]) {
-      beginCoverage = !values.customCoverages[0].beginCoverage ? '' : moment.utc(values.customCoverages[0].beginCoverage).format('YYYY-MM-DD');
-      endCoverage = !values.customCoverages[0].endCoverage ? '' : moment.utc(values.customCoverages[0].endCoverage).format('YYYY-MM-DD');
+      beginCoverage = !values.customCoverages[0].beginCoverage ? '' : dayjs.utc(values.customCoverages[0].beginCoverage).format('YYYY-MM-DD');
+      endCoverage = !values.customCoverages[0].endCoverage ? '' : dayjs.utc(values.customCoverages[0].endCoverage).format('YYYY-MM-DD');
     }
 
     model.customCoverage = {