Merge pull request #7242 from marmelab/fix-5578

Fix DateField show wrong date on negative time zones

Author: djhi

packages/ra-ui-materialui/src/field/DateField.spec.tsx

@@ -31,6 +31,19 @@ describe('<DateField />', () => {
         expect(queryByText(date)).not.toBeNull();
     });
 
+    it('should render a date string', () => {
+        const { queryByText } = render(
+            <DateField
+                record={{ id: 123, foo: '2017-04-23' }}
+                source="foo"
+                locales="en-US"
+            />
+        );
+
+        const date = new Date('2017-04-23').toLocaleDateString('en-US');
+        expect(queryByText(date)).not.toBeNull();
+    });
+
     it('should use record from RecordContext', () => {
         const { queryByText } = render(
             <RecordContextProvider

packages/ra-ui-materialui/src/field/DateField.tsx

@@ -71,12 +71,24 @@ export const DateField: FC<DateFieldProps> = memo(props => {
     }
 
     const date = value instanceof Date ? value : new Date(value);
+    let dateOptions = options;
+    if (
+        typeof value === 'string' &&
+        value.length <= 10 &&
+        !showTime &&
+        !options
+    ) {
+        // Input is a date string (e.g. '2022-02-15') without time and time zone.
+        // Force timezone to UTC to fix issue with people in negative time zones
+        // who may see a different date when calling toLocaleDateString().
+        dateOptions = { timeZone: 'UTC' };
+    }
     const dateString = showTime
         ? toLocaleStringSupportsLocales
             ? date.toLocaleString(locales, options)
             : date.toLocaleString()
         : toLocaleStringSupportsLocales
-        ? date.toLocaleDateString(locales, options)
+        ? date.toLocaleDateString(locales, dateOptions)
         : date.toLocaleDateString();
 
     return (