Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DateRangePicker] Allow same date selection #23603

Closed
cloudshadow opened this issue Sep 16, 2020 · 10 comments · Fixed by #23701
Closed

[DateRangePicker] Allow same date selection #23603

cloudshadow opened this issue Sep 16, 2020 · 10 comments · Fixed by #23701
Labels
bug 🐛 Something doesn't work component: date range picker This is the name of the generic UI component, not the React module! MUI X Pro A feature part of the Pro plan

Comments

@cloudshadow
Copy link

               <DateRangePicker
                  startText="Created From"
                  endText="Created To"
                  allowSameDateSelection={true}
                  value={[
                    searchCriteria.beginDate,
                    searchCriteria.endDate,
                  ]}
                  onChange={}
                  renderInput={(startProps, endProps) => (
                    <React.Fragment>
                      <TextField
                        {...produce(startProps, (draft) => {
                          draft.helperText = '';
                        })}
                      />
                      <DateRangeDelimiter> to </DateRangeDelimiter>
                      <TextField
                        {...produce(endProps, (draft) => {
                          draft.helperText = '';
                        })}
                      />
                    </React.Fragment>
                  )}
                />

image

i think the issue is in the validateDateRange function. This function not use the allowSameDateSelection to pass the validate of utils.isBefore(range[0], range[1])

@bennoparikh
Copy link

I have this problem also. I would appreciate if it could be fixed as fast as possible. Thanks!

@loewe
Copy link

loewe commented Oct 2, 2020

Please fix this. We need it!

@dmtrKovalenko

This comment has been minimized.

@oliviertassinari oliviertassinari changed the title allowSameDateSelection props not work in DateRangePicker component [DateRangePicker] Allow same date selection Nov 18, 2020
@oliviertassinari oliviertassinari transferred this issue from mui/material-ui-pickers Nov 18, 2020
@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work component: date range picker This is the name of the generic UI component, not the React module! labels Nov 18, 2020
@oliviertassinari
Copy link
Member

oliviertassinari commented Nov 18, 2020

It looks like we should remove the allowSameDateSelection prop. The prop is described as:

https://github.com/mui-org/material-ui/blob/35e674311a97a72da806c04ba61e44fae79fdfee/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx#L29-L33

As far as I know, there are no valid use cases for it, no matter a date picker, time picker, date range picker, etc. One thing that we have seen in the past is the capability to control the range that can be selected, this is a different problem and require a broader solution.

@havgry
Copy link
Contributor

havgry commented Nov 18, 2020

@oliviertassinari Is this a matter of applying the old PR to this repository or is there more to it?

@oliviertassinari
Copy link
Member

@havgry I can't say. I didn't look at the pull request in detail.

@hmaddisb
Copy link
Contributor

@oliviertassinari Maybe you can introduce an or clause like below?

diff --git a/packages/material-ui-lab/src/internal/pickers/date-utils.ts b/packages/material-ui-lab/src/internal/pickers/date-utils.ts
index c3d17b5703..4c1c7a7aa0 100644
--- a/packages/material-ui-lab/src/internal/pickers/date-utils.ts
+++ b/packages/material-ui-lab/src/internal/pickers/date-utils.ts
@@ -128,7 +128,7 @@ export const isRangeValid = <TDate>(
   utils: MuiPickersAdapter<TDate>,
   range: DateRange<TDate> | null,
 ): range is NonEmptyDateRange<TDate> => {
-  return Boolean(range && range[0] && range[1] && utils.isBefore(range[0], range[1]));
+  return Boolean(range && range[0] && range[1] && (utils.isBefore(range[0], range[1]) || utils.isEqual(range[0], range[1])));
 };
 
 export const isWithinRange = <TDate>(

@oliviertassinari
Copy link
Member

@hmaddisb I think that we can be more efficient:

diff --git a/packages/material-ui-lab/src/internal/pickers/date-utils.ts b/packages/material-ui-lab/src/internal/pickers/date-utils.ts
index c3d17b5703..63fb4aef06 100644
--- a/packages/material-ui-lab/src/internal/pickers/date-utils.ts
+++ b/packages/material-ui-lab/src/internal/pickers/date-utils.ts
@@ -128,7 +128,8 @@ export const isRangeValid = <TDate>(
   utils: MuiPickersAdapter<TDate>,
   range: DateRange<TDate> | null,
 ): range is NonEmptyDateRange<TDate> => {
-  return Boolean(range && range[0] && range[1] && utils.isBefore(range[0], range[1]));
+  // isBefore is exclusive, if two dates are equal, it returns false.
+  return Boolean(range && range[0] && range[1] && !utils.isBefore(range[1], range[0]));
 };

 export const isWithinRange = <TDate>(

@oliviertassinari oliviertassinari added the MUI X Pro A feature part of the Pro plan label Nov 19, 2020
@hmaddisb
Copy link
Contributor

@oliviertassinari that's fair! Should I make a PR for that? Or do you want to introduce more changes for this issue?

@oliviertassinari
Copy link
Member

@hmaddisb I think that we can try a pull request :), we would need to add a test.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: date range picker This is the name of the generic UI component, not the React module! MUI X Pro A feature part of the Pro plan
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants