Codemods

DatePicker Transform

Converts a v6 DatePicker component to a v7 DatePicker component.

Automatic Changes

• Renames the date prop to value.
• Renames the onDateChange prop to onChange. See manual changes below.
• Renames the locale prop to lang.
• Renames the errorMessage prop to statusMessage.
• Renames the describedBy prop to aria-describedby.
• Renames the datesDescribedBy prop to aria-labelledby.
• If the placeholder prop exists, updates to showPlaceholder={true}. To customize the placeholder text, update the lang prop.
• If the accessibleHint prop exists, updates to hint and adds isHintVisuallyHidden={true}.
• 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 buttonLabels.previousMonth prop to labelOverrides.previousMonthButtonScreenReaderLabel.
• Renames the buttonLabels.nextMonth prop to labelOverrides.nextMonthButtonScreenReaderLabel.
• Deletes the buttonLabels.openCalendar prop. Use the labelOverrides.getCalendarButtonScreenReaderLabel prop instead.
• Deletes the buttonLabels.closeCalendar prop. Use the labelOverrides.getCalendarButtonScreenReaderLabel prop instead.
• Deletes the buttonLabels.getCalendarButtonScreenReaderLabel prop. Use the labelOverrides.getCalendarDayScreenReaderLabel prop instead.
• Deletes the showLegend prop. If the circleDate or squareDate props are provided, then the legend will be shown.
• Deletes the dateLabels.getPrimaryLabel prop. Use the circleDate.label prop instead.
• Deletes the dateLabels.getSecondaryLabel prop. Use the squareDate.label prop instead.
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.

For example:

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

Transforms into:

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

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 onDateChange prop has been renamed to onChange and the function signature has been updated. The second parameter is an object whose key invalid has been renamed to isInvalid.

The onBlur function signature has been updated. The second parameter is an object whose key invalid has been renamed to isInvalid.