diff --git a/packages/date/src/settings.js b/packages/date/src/settings.js
index b816104eeb0c..04b8b1d1a76d 100644
--- a/packages/date/src/settings.js
+++ b/packages/date/src/settings.js
@@ -15,7 +15,7 @@
  */
 
 export const DEFAULT_DATE_SETTINGS = {
-  dateFormat: 'Y-m-d',
+  dateFormat: 'F j, Y',
   timeFormat: 'g:i a',
   gmtOffset: 0,
   timezone: '',
diff --git a/packages/date/src/test/formatDate.js b/packages/date/src/test/formatDate.js
index a986b073152b..d366c0abbf29 100644
--- a/packages/date/src/test/formatDate.js
+++ b/packages/date/src/test/formatDate.js
@@ -35,11 +35,12 @@ describe('date/formatDate', () => {
     resetSettings();
   });
 
-  it('should return 2020-05-02 with no formatting options', () => {
+  // Uses DEFAULT_DATE_SETTINGS.dateFormat
+  it('should return May 2, 2020 with no formatting options', () => {
     const dateString = '2020-05-02T10:47:26';
     const formattedDate = formatDate(dateString);
 
-    expect(formattedDate).toBe('2020-05-02');
+    expect(formattedDate).toBe('May 2, 2020');
   });
 
   it('should return "May 2, 2020" with "F j, Y" formatting options', () => {
diff --git a/packages/date/src/test/getRelativeDisplayDate.js b/packages/date/src/test/getRelativeDisplayDate.js
index 21599382ff56..14b11a5e4a6e 100644
--- a/packages/date/src/test/getRelativeDisplayDate.js
+++ b/packages/date/src/test/getRelativeDisplayDate.js
@@ -114,11 +114,12 @@ describe('date/getRelativeDisplayDate', () => {
     expect(formattedDate).toBe('yesterday');
   });
 
-  it('should return 2020-05-02 with no formatting options', () => {
+  // Uses DEFAULT_DATE_SETTINGS.dateFormat
+  it('should return May 2, 2020 with no formatting options', () => {
     const date = '2020-05-02T10:47:26';
     const formattedDate = getRelativeDisplayDate(date);
 
-    expect(formattedDate).toBe('2020-05-02');
+    expect(formattedDate).toBe('May 2, 2020');
   });
 
   it('should return May 2, 2020 with F j, Y formatting options', () => {
diff --git a/packages/story-editor/src/components/form/dateTime/datePicker.js b/packages/story-editor/src/components/form/dateTime/datePicker.js
index 91c2277c2215..9115e793c5de 100644
--- a/packages/story-editor/src/components/form/dateTime/datePicker.js
+++ b/packages/story-editor/src/components/form/dateTime/datePicker.js
@@ -28,7 +28,7 @@ import {
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { _x } from '@googleforcreators/i18n';
-import { getOptions } from '@googleforcreators/date';
+import { getOptions, format, formatDate } from '@googleforcreators/date';
 import { CircularProgress } from '@googleforcreators/design-system';
 
 /**
@@ -154,6 +154,13 @@ function DatePicker({ currentDate, onChange, onViewChange }) {
             'This label can apply to month, year and/or decade',
             'web-stories'
           )}
+          formatDay={(locale, date) => format(date, 'j')}
+          formatWeekday={(locale, date) => format(date, 'l')}
+          formatLongDate={(locale, date) => formatDate(date)}
+          formatMonth={(locale, date) => format(date, 'F')}
+          formatMonthYear={(locale, date) => format(date, 'F Y')}
+          formatShortWeekday={(locale, date) => format(date, 'D')}
+          formatYear={(locale, date) => format(date, 'Y')}
         />
       </CalendarWrapper>
     </Suspense>