Add date input validators #5024

roseline124 · 2020-07-08T16:01:32Z

Feature Background

We can use custom DateInput with material-ui's DatePicker supporting this feature.
But, it causes additional codes and package and there might be people (like me) who prefers DateInput to DatePicker because of some reasons(UI and format bug, etc). so I add this date validators.

Changes

Add date, datetime validators minDate, maxDate
Add minDate, maxDate to validation.spec.ts
Add translated message (en, fr)
Add example in CreateEdit.md document

Check Lists

pass unit test
pass lint

fzaninotto

I'm not sure I understand the difference with minValue and maxValue. Is it only the formatting of the min and max values in the error message?

packages/ra-language-french/src/index.ts

fzaninotto · 2020-07-09T07:36:13Z

packages/ra-core/src/form/validate.ts

@@ -1,4 +1,5 @@
 import lodashMemoize from 'lodash/memoize';
+import format from 'date-fns/format';


Browsers have an API for formatting dates (Intl), no need for an external library

Hi, these validators look great 👍

Thanks for contributing 😊.

I've one remark: Can we can consider using another name for these validators?

Minimal date means the input should contain a date after the specified one

Maximal date means the input should contain a date before the specified one

So maybe you can name these methods afterDate and beforeDate. What do you think?

Hi, these validators look great 👍

Thanks for contributing 😊.

I've one remark: Can we can consider using another name for these validators?

Minimal date means the input should contain a date after the specified one

Maximal date means the input should contain a date before the specified one

So maybe you can name these methods afterDate and beforeDate. What do you think?

I read your comment. Thank you for reviewing my code!
I implemented code to allow the base date to be included, so validators are named 'min' and 'max'. You means that it'll be better if the code excludes the base date? or just changes the validator name?

Browsers have an API for formatting dates (Intl), no need for an external library

Thank you!
I used new Intl.DateTimeFormat().format(date) also changed format options (DateTimeFormatOptions).
The option can be a little long like this. I don't know this is good.

const options = { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', };

It needs to know DateTimeFormatOptions and readability doesn't look good.
What do you think?

Luwangel

Hi, these validators look great 👍

Thanks for contributing 😊.

I've one remark: Can we can consider using another name for these validators?

Minimal date means the input should contain a date after the specified one
Maximal date means the input should contain a date before the specified one

So maybe you can name these methods afterDate and beforeDate. What do you think?

Co-authored-by: Francois Zaninotto <fzaninotto@gmail.com>

fzaninotto · 2020-07-10T08:50:55Z

packages/ra-core/src/form/validate.ts

-        !isEmpty(value) && new Date(value) < new Date(min)
+    ) => {
+        const inputValue = new Date(value);
+        inputValue.setSeconds(0);


What's the rationale of this?

It's written below!

roseline124 · 2020-07-10T09:00:21Z

I'm not sure I understand the difference with minValue and maxValue. Is it only the formatting of the min and max values in the error message?

I admit minValue and maxValue can cover this feature. But, I think minDate, maxDate validators are more readable and the error message is also important, too.

comparing code using minDate to one not using

I added nowDate.setSeconds(0) to my feature.
Because DateTimeInput can't choose seconds, the seconds is set as 0 when selecting date in DateTimeInput.
So If I had set the baseDate as Fri Jul 10 2020 17:47:57 and selected Fri Jul 10 2020 17:47, the validator will throw error even If these are the same date.

<DateTimeInput
  source="advertisementEndAt"
  validate={[minDate(new Date())]}
/>

<DateTimeInput
  source="advertisementEndAt"
  validate={[
    (value, values) => {
      const nowDate = +new Date()
      nowDate.setSeconds(0)
      return minValue(nowDate)(Number(value), values)
    },
  ]}
/>

~~2. Error message~~
~~- minDate: Must be after 2020-07-10~~
~~- minValue: Must be at least 1594371535226~~
-> ah, it could be also formatted like minValue(..., ``Must be after ${formattedValue}``)

I'm okay if you close this PR.
Thank you for reviewing my code

…ate-input-validation

JulienMattiussi · 2020-08-04T14:13:51Z

docs/CreateEdit.md

@@ -946,6 +949,7 @@ const validateEmail = email();
 const validateAge = [number(), minValue(18)];
 const validateZipCode = regex(/^\d{5}$/, 'Must be a valid Zip Code');
 const validateSex = choices(['m', 'f'], 'Must be Male or Female');
+const validateDate = [minDate(new Date())];


Should use maxDate here to make this example more consistant with a Birthdate and avoid confusion IMO

you should also add formatting options to illustrate usage

fzaninotto · 2020-08-04T16:01:07Z

docs/CreateEdit.md

@@ -919,6 +919,8 @@ Alternatively, you can specify a `validate` prop directly in `<Input>` component
 * `required(message)` if the field is mandatory,
 * `minValue(min, message)` to specify a minimum value for integers,
 * `maxValue(max, message)` to specify a maximum value for integers,
+* `minDate(min, message)` to specify a minimum value for date,


this doc is now incomplete - you must add the formatting options parameter

fzaninotto · 2020-08-04T16:01:37Z

docs/CreateEdit.md

@@ -946,6 +949,7 @@ const validateEmail = email();
 const validateAge = [number(), minValue(18)];
 const validateZipCode = regex(/^\d{5}$/, 'Must be a valid Zip Code');
 const validateSex = choices(['m', 'f'], 'Must be Male or Female');
+const validateDate = [minDate(new Date())];


you should also add formatting options to illustrate usage

fzaninotto · 2020-08-04T16:02:15Z

packages/ra-core/src/form/validate.ts

+        const input = new Date(value);
+        input.setSeconds(0);
+
+        return !isEmpty(value) && input < new Date(min)


min should be a Date, why do you create a new Date object

fzaninotto · 2020-08-04T16:02:30Z

packages/ra-core/src/form/validate.ts

+ * <DateInput name="foo" validate={fooValidators} />
+ */
+export const minDate = memoize(
+    (min, message = 'ra.validation.minDate', formatOptions = {}) => (


please type the args using TypeScript

fzaninotto · 2020-08-04T16:02:48Z

packages/ra-core/src/form/validate.ts

+    ) => {
+        const input = new Date(value);
+        input.setSeconds(0);
+        return !isEmpty(value) && input > new Date(max)


same, max should already be a Date

roseline124 added 11 commits July 8, 2020 19:55

Add minDate validation test

a145897

Add maxDate validation test

dd2726d

Add minDate, maxDate validator

7a59003

Add translate message about minDate, maxDate

744be4c

Add minDate, maxDate validation to docs

19965a1

Add minDate, maxDate to french ra-message

e57d843

Trim importing date-fns methods

2995e82

Remove usused package

4123ce2

Fix param type and formatString format

99bd7b2

Return inline

673caf3

Use new Date not date-fns package

b50ddfe

roseline124 changed the title ~~Add date input validation~~ Add date input validators Jul 8, 2020

fzaninotto requested changes Jul 9, 2020

View reviewed changes

packages/ra-language-french/src/index.ts Outdated Show resolved Hide resolved

packages/ra-language-french/src/index.ts Outdated Show resolved Hide resolved

fzaninotto reviewed Jul 9, 2020

View reviewed changes

Luwangel reviewed Jul 9, 2020

View reviewed changes

roseline124 and others added 3 commits July 10, 2020 17:36

Ignore seconds when comparing input value

e0753d1

Update packages/ra-language-french/src/index.ts

6d157a5

Co-authored-by: Francois Zaninotto <fzaninotto@gmail.com>

Update packages/ra-language-french/src/index.ts

84eec66

Co-authored-by: Francois Zaninotto <fzaninotto@gmail.com>

fzaninotto reviewed Jul 10, 2020

View reviewed changes

roseline124 added 3 commits July 10, 2020 22:55

Merge branch 'next' of https://github.com/marmelab/react-admin into d…

7d6f179

…ate-input-validation

Use built-in library and Add format option param

c657417

Update test with Intl.DateTimeFormat

bdba23e

roseline124 requested review from fzaninotto and Luwangel July 10, 2020 14:47

Luwangel approved these changes Aug 3, 2020

View reviewed changes

Luwangel added RFR Ready For Review enhancement labels Aug 3, 2020

JulienMattiussi reviewed Aug 4, 2020

View reviewed changes

fzaninotto requested changes Aug 4, 2020

View reviewed changes

fzaninotto closed this Aug 11, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add date input validators #5024

Add date input validators #5024

roseline124 commented Jul 8, 2020 •

edited

fzaninotto left a comment

fzaninotto Jul 9, 2020

roseline124 Jul 10, 2020 •

edited

roseline124 Jul 10, 2020

Luwangel left a comment •

edited

fzaninotto Jul 10, 2020

roseline124 Jul 10, 2020

roseline124 commented Jul 10, 2020 •

edited

JulienMattiussi Aug 4, 2020 •

edited

fzaninotto Aug 4, 2020

fzaninotto Aug 4, 2020

fzaninotto Aug 4, 2020

fzaninotto Aug 4, 2020

fzaninotto Aug 4, 2020

fzaninotto Aug 4, 2020

		@@ -1,4 +1,5 @@
		import lodashMemoize from 'lodash/memoize';
		import format from 'date-fns/format';

Add date input validators #5024

Add date input validators #5024

Conversation

roseline124 commented Jul 8, 2020 • edited

Feature Background

Changes

Check Lists

fzaninotto left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

roseline124 Jul 10, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Luwangel left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

roseline124 commented Jul 10, 2020 • edited

JulienMattiussi Aug 4, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

roseline124 commented Jul 8, 2020 •

edited

roseline124 Jul 10, 2020 •

edited

Luwangel left a comment •

edited

roseline124 commented Jul 10, 2020 •

edited

JulienMattiussi Aug 4, 2020 •

edited