IcDatePicker event output differs when typing date

[RedOwl1]

Summary of the bug

The Date in the prop onIcChange's event.detail.value is in British Summer Time when the event is emitted after clicking of a date using the calendar, but is in Greenwich Mean Time when emitted after typing a date. This can make it difficult to parse & validate.

🪜 How to reproduce

Tell us the steps to reproduce the problem:

1. Create an IcDatePicker that logs the output of onIcChange
2. Select a date using the calendar button, the value logged will be similar Thu Oct 17 2024 00:00:00 GMT+0100 (British Summer Time)
3. Press the clear button
4. Type in a date, the value logged will be similar to Mon Oct 28 2024 00:00:00 GMT+0000 (Greenwich Mean Time)

📸 Screenshots or code

<IcDatePicker
  data-testid="end-date-picker"
  name={name}
  label="End date"
  showPickerTodayButton
  value={value}
  onIcChange={(e) => {
    console.log('endDate: ', e.detail.value);
  }}
  required
  ref={ref}
/>

🖥 📱 Device

• Type: Desktop
• Device: Macbook
• OS version: macOS13
• Browser version: Chrome 127

🧐 Expected behaviour

The emitted Date should be same timezone regardless of how the date was entered

📝 Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

Given the icDatePicker is used, When a user types in a date, Then the event emitted should be in the same form as when the date is entered via the calendar

[MI6-255]

We think this is a quirk with Daylight Savings Time, would offering functionality to additionally output as Zulu time solve your issue?

[ad9242]

The date value is currently emitted as a date object as this is a flexible way in which the user can convert it to any format they require. Changing the format of the value would be a breaking change but we could look at emitting the value in additional formats, for example { value: , zuluTime: } where zuluTime is actually just the existing date value converted by calling date.toISOString()

alternatively maybe some helper methods could be added to convert dates to certain formats

[RedOwl1]

Having it in ISO format would be good I think, however we managed to get what we needed by using the startOfDate package from date-fns to strip the time of the value

onIcChange={(e) => {
            if (e.detail.value) {
              const endDate = startOfDay(new Date(e.detail.value));
              onChange(endDate);
            } else {
              onChange(null);
            }
          }}