Codemods

DateRangePicker Transform

Converts a v6 DateRangePicker component to a v7 DateRangePicker component.

Automatic Changes

• Adds the new id prop which is required.
• Renames the canRetainEndDateOnChange prop to shouldRetainEndDateOnChange.
• Renames the errorMessage prop to statusMessage.
• Renames the locale prop to lang.
• If the placeholder prop exists, updates to showPlaceholder={true}. To customize the placeholder text, update the lang prop.
• Renames the primaryDate prop to circleDate.dateString. Use the circleDate.label prop to customize the label.
• Renames the secondaryDate prop to squareDate.dateString. Use the squareDate.label prop to customize the label.
• Renames the labels.previousMonth prop to labelOverrides.previousMonthButtonScreenReaderLabel.
• Renames the labels.nextMonth prop to labelOverrides.nextMonthButtonScreenReaderLabel.
• Removes the labels.openCalendar prop, which has been deprecated. Use the labelOverrides.getCalendarButtonScreenReaderLabel instead.
• Removes the labels.closeCalendar prop, which has been deprecated. Use the labelOverrides.getCalendarButtonScreenReaderLabel instead.
• Removes the labels.selectedDate prop, which has been deprecated.
• Removes the labels.accessibleHint prop, which has been deprecated. Use the hint prop instead.
• Removes the labels.getPrimaryLabel prop, which has been deprecated. Use circleDate.label prop instead.
• Removes the labels.getSecondaryLabel prop, which has been deprecated. Use squareDate.label prop instead.
• Removes the ids prop, which has been deprecated. Use the id prop instead.
• Removes the dates prop, which has been deprecated. See manual changes below.
• Removes the showLegend prop, which has been deprecated. If the circleDate or squareDate props are provided, then the legend will be shown.
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.

For example:

1import { DateRangePicker } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <DateRangePicker
6      ids={{ start: 'start-id', end: 'end-id' }}
7      dates={dates}
8      canRetainEndDateOnChange={true}
9      errorMessage="Message."
10      locale="en-US"
11      placeholder="MM/DD/YYYY"
12      primaryDate={primaryDate}
13      secondaryDate={secondaryDate}
14      labels={{
15        previousMonth: 'Previous month',
16        nextMonth: 'Next month',
17        openCalendar: 'Open calendar',
18        closeCalendar: 'Close calendar',
19        selectedDate: 'Selected date',
20        accessibleHint: 'Please select a date.',
21        getPrimaryLabel: () => {},
22        getSecondaryLabel: () => {},
23      }}
24      showLegend={true}
25      onChange={() => {}}
26      onBlur={() => {}}
27      weekdays={weekdays}
28      format={format}
29      startDayOffset={startDayOffset}
30      status={status}
31      theme={{ color: 'red' }}
32      {...otherProps}
33    />
34  );
35}

Transforms into:

1import { DateRangePicker } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <DateRangePicker
6      shouldRetainEndDateOnChange={true}
7      statusMessage="Message."
8      lang="en-US"
9      showPlaceholder={true}
10      circleDate={{
11        dateString: primaryDate,
12        label: 'Primary Date',
13      }}
14      squareDate={{
15        dateString: secondaryDate,
16        label: 'Secondary Date',
17      }}
18      labelOverrides={{
19        previousMonthButtonScreenReaderLabel: 'Previous month',
20        nextMonthButtonScreenReaderLabel: 'Next month',
21      }}
22      onChange={() => {}}
23      onBlur={() => {}}
24      weekdays={weekdays}
25      format={format}
26      startDayOffset={startDayOffset}
27      status={status}
28      id="unique-id-for-date-range-picker"
29      {...otherProps}
30    />
31  );
32}

Manual Changes

Updated Date Format for dateString

The expected format of the dateString (applicable to the new value, onChange, and onBlur props) across the board is now expected to always be in the format YYYY-MM-DD. If you were previously providing dateStrings to the component in a different format, please update your code to always provide and receive any dateStrings in the format YYYY-MM-DD.

Function signature changes

The onChange and onBlur function signatures has been updated. The second argument is now an object of type:

1{
2  start: { dateString: string, dateObject: Date | null },
3  end: { dateString: string, dateObject: Date | null },
4  isInvalid: boolean
5}

dates prop is deprecated

Move the following v6 props to the corresponding v7 props:

• dates.start -> value.start
• dates.end -> value.end
• dates.min -> minDate
• dates.max -> maxDate
• dates.disabled -> disabledDates