feat(date-field): customize format (#252)

* feat(date-field): customize format * test(date-field): custom format
redgeoff · Feb 22, 2021 · 2ef4301 · 2ef4301
1 parent 5361e49
commit 2ef4301
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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 () => {