From 2ef43014c1b4ad4fd829b647cbf6bfc9902f2cf0 Mon Sep 17 00:00:00 2001
From: Geoff Cox <redgeoff@gmail.com>
Date: Sun, 21 Feb 2021 16:31:44 -0800
Subject: [PATCH] feat(date-field): customize format (#252)

* feat(date-field): customize format

* test(date-field): custom format
---
 src/demo/components/fields.js |  1 +
 src/fields/date-field.js      |  4 +++-
 src/fields/date-field.test.js | 20 ++++++++++++++++++--
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/demo/components/fields.js b/src/demo/components/fields.js
index 1e53c068..67b7ede1 100644
--- a/src/demo/components/fields.js
+++ b/src/demo/components/fields.js
@@ -124,6 +124,7 @@ const fields = {
       minDate: '2018-01-01T23:07:28.157Z',
       maxDate: '2022-01-01T23:07:28.157Z',
       required: true,
+      // format: 'yyyy-MM-dd'
     },
 
     {
diff --git a/src/fields/date-field.js b/src/fields/date-field.js
index 86d1a34c..7974f4da 100644
--- a/src/fields/date-field.js
+++ b/src/fields/date-field.js
@@ -39,6 +39,7 @@ class DateField extends React.PureComponent {
       fullWidth,
       disabled,
       accessEditable,
+      format,
     } = this.props;
 
     const dis = accessEditable === false || disabled;
@@ -67,7 +68,7 @@ class DateField extends React.PureComponent {
               fullWidth={fullWidth}
               disabled={dis}
               id={component.getUniqueId()}
-              // format="M/d/YYYY h:m a"
+              format={format}
             />
           </span>
         </MuiPickersUtilsProvider>
@@ -99,4 +100,5 @@ export default attach([
   'maxDate',
   'fullWidth',
   'disabled',
+  'format',
 ])(DateField);
diff --git a/src/fields/date-field.test.js b/src/fields/date-field.test.js
index 02100e7e..c3d2bb00 100644
--- a/src/fields/date-field.test.js
+++ b/src/fields/date-field.test.js
@@ -1,5 +1,6 @@
 import { fireEvent } from '@testing-library/react';
 import { compileAndRender } from '../test-utils';
+import format from 'date-fns/format';
 
 const definition = {
   component: 'DateField',
@@ -8,7 +9,7 @@ const definition = {
   help: 'Date help',
 };
 
-it('should pick date', async () => {
+const shouldPickDate = (definition, expectedValue) => {
   const { getByLabelText, getByRole } = compileAndRender(definition);
 
   // Click text field--this will launch the picker
@@ -24,8 +25,23 @@ it('should pick date', async () => {
   fireEvent.click(ok);
 
   // Verify that the input has been updated accordingly
+  expect(textField).toHaveValue(expectedValue);
+};
+
+it('should pick date', async () => {
   const month = new Date().toLocaleString('default', { month: 'long' });
-  expect(textField).toHaveValue(`${month} 17th`);
+  shouldPickDate(definition, `${month} 17th`);
+});
+
+it('should pick date with custom format', async () => {
+  const yearMonth = format(new Date(), 'yyyy-MM');
+  shouldPickDate(
+    {
+      ...definition,
+      format: 'yyyy-MM-dd',
+    },
+    `${yearMonth}-17`
+  );
 });
 
 it('should initialize picker', async () => {