Codemods
The American Express Design System provides a unified language for designing American Express websites and experiences. The design system provides design resources that match our coded components and are aligned with the American Express brand. Included are colors, components, icons and glyphs, type styles, and graphic assets to get you up and running quickly.
On this page
DateInput Migration
The DateInput component has changed significantly from v6 to v7.
In v6, DateInput is used with YearInput, MonthInput, and DayInput components as children. Visually, it appears as three distinct inputs for the year, month, and day.
<DateInput>
<YearInput />
<MonthInput />
<DayInput />
</DateInput>
In v7, DateInput is a self-closing component. The YearInput, MonthInput, and DayInput components are deprecated. Visually, it appears as a single input for the entire date.
<DateInput />
Manual Migration Options
Migrate to v7 DateInput
In order to migrate to the v7 DateInput, refer to the component documentation.
Maintain Same Behavior as v6 DateInput
In order to maintain the same behavior as the v6 DateInput, use the following high-level component structure. See the v6 implementation for more details.
<div>
<Input id="year-input" />
<SelectNative id="month-input">
<SelectNativeOption value="1">January</SelectNativeOption>
{/** remaining months */}
</SelectNative>
<SelectNative id="day-input">
<SelectNativeOption value="1">1</SelectNativeOption>
{/** remaining days */}
</SelectNative>
</div>
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.