Date Picker always changes to the previous day

Bug report

Describe the bug

When selecting a date, the DatePicker always changes the previous day

To Reproduce

• Setup a list with a timestamp

  orderDate: timestamp(),

• create a new record
• select a date
• date will change to the previous day

Expected behaviour

I expect the date a selected to continue to be the date I selected

Screenshots

System information

• OS: macos
• Browser: chrome & brave

Additional context

The date stored in the database also seems to be the new date “choosen” by the DatePicker…

IOW:

• If I’m in MST and I select 7/15/2021 07:00
• The UI updates to 7/14/2021 07:00
• I save
• The database displays 2021-07-14 13:00:00

[mrkutly]

I’m running into a similar issue, but the dates saved in my DB are correct (as in, they are the ones I clicked).

Inspecting the picker with React devtools shows that the date picker is getting the date I clicked as its value prop, but just displaying the wrong date.

It looks to be caused by this line: https://github.com/keystonejs/keystone/blob/58f525d9118471abb434bf912dd557d282c87250/design-system/packages/fields/src/DatePicker/index.tsx#L86

Formatter code:

const formatter = new Intl.DateTimeFormat(undefined, {
  dateStyle: 'short',
});

export const formatDate = (date: Date): string => formatter.format(date);

Update I checked this in my console and was able to recreate the issue:

Another fun update Looks like using - as the delimiter in the Date constructor causes JS to treat it as an ISO date or something, so the timezones get weird. But using / treats it like a calendar date.

[codingwithchris]

@bladey I posted another bug report for this in Slack, but the issue still exists and has not been addressed 😢 https://keystonejs.slack.com/archives/C01STDMEW3S/p1648051507931239

Our experience is the exact same as others.

Upon closer inspection of the DatePicker component in Keystone, the value passed to the component is correct.

However the date information given to aria-label and children is incorrect. In our case it is always off by 1 day and 5 hours

Database Value

UI Display

This is a critical bug IMO 😕 It’s causing massive confusion for our clients in the medical field who are relying on the application we built to deliver accurate information.