Migrating DatePicker to v20.0.0+

Overview

In v20 Chroma has updated the <DatePicker /> component to no longer use Dayjs or String for its public API. The component now accepts and returns vanilla JavaScript Date objects. This change simplifies the API and removes the dependency on Dayjs, making it easier to integrate with other date libraries if needed.

Why the change?

We moved from Dayjs and string values to native Date objects to reduce dependencies and make date handling more consistent.

• Removes dependency on a specific date library.
• Avoids ambiguous string parsing across locales and formats (examples: "01/02/2023" could be Jan 2 or Feb 1 depending on locale).
• Provides a more standard and widely supported date representation.

Changes

the following changes were made to the DatePicker component:

• The value prop now accepts a Date object instead of a Dayjs instance or string.
• The onChange callback now returns a Date object instead of a Dayjs instance or string.
• The minDate and maxDate props now accept Date objects instead of Dayjs instances or strings.

Example Migration

If you want to continue using Dayjs in your application, you can easily convert between Dayjs and Date objects using the toDate() method for Dayjs and the dayjs() function for Date objects.

Example of migrating a DatePicker component to the new API while still using Dayjs in your application:

      const onChange = (dateValue: Date | null) => setDate(dateValue ? dayjs(dateValue) : null);
      ...
      <DatePicker
        id="error-valid-datepicker"
        onChange={onChange}
        onError={mockOnError}
        minDate={dayjsMinDate.toDate() }
        maxDate={dayjsMaxDate.toDate() }
        value={dayjsDate.toDate()}
      />

If you currently store DatePicker values as strings, convert them to native Date objects, preferably with new Date(...) and only use Date.parse(...) when the input format is guaranteed.

Important: When using Date.parse(), be aware that it can be ambiguous and may not work consistently across different locales and formats. It's generally recommended to use a more robust date parsing library or to create Date instances directly for better reliability.

// This can be ambiguous and may not work consistently across different locales and formats.
myDate = new Date(Date.parse("01/02/2023"))
// This is a more reliable way to create a Date object.
myDate = new Date(year, monthIndex, day)