Added the missing 'min' and 'max' props to the Material UI and MUI packages

[vcardins]

Following up on the issue https://github.com/vazco/uniforms/issues/1213#issuecomment-1416058859, this PR is suppose to fix it.

[vcardins]

Thanks for the feedbacks, I'll work on them. I'm having issues when I run npm i (I've never seen this before) and not being able to resolve it. Any ideas?

[kestarumper]

Hi @vcardins, Could you give us your node -v and npm -v versions? We require node 16 (and npm 8 if I recall correctly). Also, please use npm ci instead.

[vcardins]

My current node and npm version. Also, the error output

[vcardins]

I use nvm and tried with node v- 16.0.0 but also didn't work.

[radekmie]

@vcardins I tried it now on Node.js 18.13.0 and npm 8.19.3. However, the error you posted suggests a binary dependency problem. Based on the logs you're using macOS - what CPU is it? I'm on M2 and it works correctly. Also, have you tried clearing the npm cache (npm cache clear --force)?

[vcardins]

Very frustrating for me, guys. I'll try on my windows machine when at home.

[ErnestTeluk]

I have tried node v19.6.0 and npm 9.4.0 and I get the same error as you but if you run it on the version that @radekmie suggests it works for me (working on a mac with m1 pro). I see from your screen that after using npm cache clear --force and nvm use node you are still using node v19.6.0 and npm 9.4.0. Try using node 18.13.0 and npm 8.19.3.

[vcardins]

I manage to fix the npm errors but now when I run npm test I get One thing that I noticed is uniforms-mui package uses @types/react 18.x.x, while the main repo "@types/react": "17.0.39". It's getting closer but still far. :)

[vcardins]

Also, the CI errors that are happening now has nothing to do with my changes. https://github.com/vazco/uniforms/actions/runs/4226780890/jobs/7340589734

[radekmie]

Uff, at least we're moving on 😅 I think it may be the problem of transitive dependencies. Did you use npm ci or npm i? It definitely should be the former.

As for the second point, I think it's actually because of this change - the type parameter is not passed to dateFormat calls.

[vcardins]

I forgot to mention that I had to add @ts-ignore for this to pass. Does it work fine for you?

[radekmie]

@vcardins I'm so sorry, I messed up terribly 🤦 I wanted to push a last fix on your master branch and instead erased all of the commits. Can you push them again? As soon as the PR got closed, I lost the access right to push there.

Here's the commit I made - please apply it on top of your changes and we're good to go.

commit 5968fea045000e97787c57210ac5fcf5a63ded2a (HEAD -> master, pr1215)
Author: Radosław Miernik <radekmie@gmail.com>
Date:   Wed Feb 22 17:05:29 2023 +0100?? ''}
       {...filterDOMProps(props)}
    Fixed date format.
   );
diff --git a/packages/uniforms-material/src/DateField.tsx b/packages/uniforms-material/src/DateField.tsx
index bd0f9dcd..e31b2514 100644
--- a/packages/uniforms-material/src/DateField.tsx
+++ b/packages/uniforms-material/src/DateField.tsx
@@ -7,17 +7,8 @@ type DateFieldType = 'date' | 'datetime-local';

 /* istanbul ignore next */
 const DateConstructor = (typeof global === 'object' ? global : window).Date;
-
-const dateFormat = (
-  value?: Date | string,
-  type: DateFieldType = 'datetime-local',
-) =>
-  value
-    ? (typeof value === 'string' ? value : value?.toISOString()).slice(
-        0,
-        type === 'datetime-local' ? -8 : -14,
-      )
-    : '';
+const dateFormat = (value?: Date, type: DateFieldType = 'datetime-local') =>
+  value?.toISOString().slice(0, type === 'datetime-local' ? -8 : -14);

 const dateParse = (timestamp: number, onChange: DateFieldProps['onChange']) => {
   const date = new DateConstructor(timestamp);
@@ -32,9 +23,9 @@ export type DateFieldProps = FieldProps<
   Date,
   TextFieldProps,
   {
+    labelProps?: object;
     max?: Date;g;
     min?: Date;: object;
-    labelProps?: object;
     type?: 'date' | 'datetime-local';
   } type?: 'date' | 'datetime-local';
 >;}
@@ -71,9 +62,9 @@ function Date({
       label={label}nction Date({
       InputLabelProps={{ shrink: true, ...labelProps, ...InputLabelProps }}
       inputProps={{ps={{ shrink: true, ...labelProps, ...InputLabelProps }}
-        readOnly,{{
-        min: dateFormat(min),
         max: dateFormat(max),
+        min: dateFormat(min),
+        readOnly,Format(min),
         ...props.inputProps,
       }}...props.inputProps,
       margin={themeProps?.margin ?? 'dense'}
@@ -85,7 +76,7 @@ function Date({
       placeholder={placeholder}
       ref={inputRef}
       type={type}
-      value={dateFormat(value)}
+      value={dateFormat(value, type) ?? ''}
       {...filterDOMProps(props)}
     />
   );
diff --git a/packages/uniforms-mui/src/DateField.tsx b/packages/uniforms-mui/src/DateField.tsx
index 491ef8ae..1220c604 100644
--- a/packages/uniforms-mui/src/DateField.tsx
+++ b/packages/uniforms-mui/src/DateField.tsx
@@ -6,17 +6,8 @@ type DateFieldType = 'date' | 'datetime-local';

 /* istanbul ignore next */
 const DateConstructor = (typeof global === 'object' ? global : window).Date;
-
-const dateFormat = (
-  value?: Date | string,
-  type: DateFieldType = 'datetime-local',
-) =>
-  value
-    ? (typeof value === 'string' ? value : value?.toISOString()).slice(
-        0,
-        type === 'datetime-local' ? -8 : -14,
-      )
-    : '';
+const dateFormat = (value?: Date, type: DateFieldType = 'datetime-local') =>
+  value?.toISOString().slice(0, type === 'datetime-local' ? -8 : -14);

 const dateParse = (timestamp: number, onChange: DateFieldProps['onChange']) => {
   const date = new DateConstructor(timestamp);
@@ -31,9 +22,9 @@ export type DateFieldProps = FieldProps<
   Date,
   TextFieldProps,
   {
-    max?: string;
-    min?: string;
     labelProps?: object;
+    max?: Date;
+    min?: Date;
     type?: 'date' | 'datetime-local';
   }
 >;
@@ -67,9 +58,9 @@ function Date({
       label={label}
       InputLabelProps={{ shrink: true, ...labelProps, ...InputLabelProps }}
       inputProps={{
-        readOnly,
-        min: dateFormat(min),
         max: dateFormat(max),
+        min: dateFormat(min),
+        readOnly,
         ...props.inputProps,
       }}
       margin="dense"
@@ -81,7 +72,7 @@ function Date({
       placeholder={placeholder}
       ref={inputRef}
       type={type}
-      value={dateFormat(value)}
+      value={dateFormat(value, type) ?? ''}
       {...filterDOMProps(props)}
     />
   );

[vcardins]

ahahhahah It's ok, we get this :D. I'll push soon