jungsoft / materialui-daterange-picker Goto Github PK

How do I change the language? I would like to put it in PT-BR

Is there any way to disable switching to next month if max date allows falls in current month.

We used this daterange picker in our app. There is a bug if you change your time zone to some ohter where there is already "tomorrow" (f.e. UTC+14) or still "yesterday" (f.e. UTC-12). If you select some date range (f.e. this/last week or month) one more day then needed is selected (f.e. last week selects 8 days instead of 7 and so on). Check the images:

What did I do

Build the following app with materialui-daterange-picker and @material-ui/core as dependencies.

import React from "react";
import { DateRange, DateRangePicker } from "materialui-daterange-picker";
import Typography from "@material-ui/core/Typography";

const App = () => {
  const [open, setOpen] = React.useState(true);
  const [dateRange, setDateRange] = React.useState<DateRange>({});

  const toggle = () => setOpen(!open);

  return (
    <>
      <Typography>
        Start Date: {dateRange?.startDate?.toDateString()}
      </Typography>
      <Typography>End Date: {dateRange?.endDate?.toDateString()}</Typography>
      <DateRangePicker
        open={open}
        toggle={toggle}
        onChange={(range) => setDateRange(range)}
      />
    </>
  );
};

export default App;

CodeSandbox

What did I see

TypeError
(0 , $csb__system.styleFunctionSx) is not a function
    at $csb$eval (https://z6xeu.csb.app/node_modules/
material-ui/core/esm/Box/Box.js:9:54
V
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:101021
ee.evaluate
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:113417
xe.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:124731
c
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:113145
    at $csb$eval (https://z6xeu.csb.app/node_modules/
material-ui/core/esm/Box/index.js:6:17
V
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:101021
ee.evaluate
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:113417
xe.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:124731
c
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:113145
    at $csb$eval (https://z6xeu.csb.app/node_modules/
material-ui/core/esm/index.js:109:46
V
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:101021
ee.evaluate
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:113417
xe.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:124731
c
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:113145
$csb$eval
https://z6xeu.csb.app/node_modules/materialui-daterange-picker/dist/index.es.js:23:18
V
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:101021
ee.evaluate
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:113417
xe.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:124731
c
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:113145
$csb$eval
/src/App.tsx:2
  1 | import React from "react";
> 2 | import { DateRange, DateRangePicker } from "materialui-daterange-picker";
  3 | import Typography from "@material-ui/core/Typography";
  4 | 
  5 | const App = () => {
View compiled
▶ 4 stack frames were collapsed.
$csb$eval
/src/index.tsx:3
  1 | import { render } from "react-dom";
  2 | 
> 3 | import App from "./App";
  4 | 
  5 | const rootElement = document.getElementById("root");
  6 | render(<App />, rootElement);
View compiled
▶ 10 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
This error overlay is powered by `react-error-overlay` used in `create-react-app`.

What did I expect

The app built successfully

What did I found

I need to add @material-ui/system as dependency to make the app works.

CodeSandbox

when i click toady and yesterday it will return two same time for startDate and endDate:


what i want is form start of the day like 00:00:00 to current time for today,
And start of the day like 00:00:00 to 23:59:59 for yesterday,

Hi,

Is there any way to close the date range picker on tabbing away?
closeOnClickOutside doesn't seem to work.

I tried to take a fork of this package and tried to install from github and i ran into TypeError: Cannot read properties of undefined (reading 'createSvgIcon') error. Can you give me some insights on this error message?

I get a build fail in my Jenkins pipeline due to @material-ui-icons dependency. Any idea to fix this?

The generated backdrop is in the way in some cases (like when using my own ClickAwayListener, or using the DateRangePicker in a Modal).

There is no point in adding the backdrop if the closeOnClickOutside is false.

The package has React 16 as a peer dependency and needs to be updated for React 17.

selected start date and end date then on click on the enter button function not working and the date picker also not closing

Please update your package also to remove this warning.
Warning: Failed prop type: The prop justify of ForwardRef(Grid) is deprecated. Use justifyContent instead, the prop was renamed.
Thanks in advance!

Hi,

 <DateRangePicker
          open={open}
          toggle={toggle}
          onChange={onDateRangeSelected}
          definedRanges={[]}
          initialDateRange={dateRange}
          minDate={minDate}
          maxDate={maxDate}
        />

I provided minDate as '12/12/2020' and maxDate as '28/12/2020'. But the calendar is enabling from Dec 1st to Dec 26

e.g.

(args: DateRangePickerWrapperProps) => {
  const initialDateRange = {
    startDate: addDays(new Date(), -3),
    endDate: addDays(new Date(), 3),
  }

  const definedRanges = [{
    label: "Default",
    startDate: addDays(new Date(), -3),
    endDate: addDays(new Date(), 3),
  }, {
    label: "Start of Month",
    startDate: startOfMonth(new Date()),
    endDate: addDays(startOfMonth(new Date()), 2),
  }, {
    label: "End of Month",
    startDate: addDays(endOfMonth(new Date()), -2),
    endDate: endOfMonth(new Date()),
  }]
  const  minDate = addDays(new Date(), -2);
  const maxDate = addDays(new Date(), 2);

  return (
    <DateRangePicker
      {...args}
      onChange={(r) => console.log(r)}
      initialDateRange={initialDateRange}
      definedRanges={definedRanges}
      minDate={minDate}
      maxDate={maxDate}
    />
  );
}

when I changed the minDate and maxDate validated out of range of the defined range, the range error will be come out

suggested sol on DateRangePicker.tsx @ ftn of setDateRangeValidated:

...
    if (newStart && newEnd && (newEnd >= minDateValid && newStart <= maxDateValid)) {
      if (newEnd >= minDateValid)
        range.startDate = newStart = max([newStart, minDateValid]);
      if (newStart <= maxDateValid)
        range.endDate = newEnd = min([newEnd, maxDateValid]);
...

Currently, when the calendar opens up, it shows the current month + next month. Is there a way to set previous month + current month instead?

Usecase: If maxDate is current date, showing current month + next month is not useful for the user as the future dates will be disabled.

import { StylesProvider } from '@material-ui/core/styles' - it doesn't work, you must use import { StylesProvider } from '@material-ui/styles' instead

Hi,
It would be nice if I can add custom button controls inside the wrapper component. Maybe have a footer prop which takes in the current range etc.

Thank you

Hi!

Great lib, thanks!

Still, as i see, it's not mobile-friendly:
http://joxi.ru/52aYnMxcEyx3v2

It would be great if "date to" selector block show itself under the "date from" selector block.

Currently getting a console Warning:

Failed prop type: The prop `justify` of `ForwardRef(Grid2)` is deprecated. Use `justifyContent` instead, the prop was renamed.

This is a follow up on Issue 24 that seems to have been addressed on Pull Request #25

However, looks like this change was merged into master branch. But, it didn't actually make it to the latest v1.1.92 release? When making use of the library, It is still passing justify instead of justifyContent.

v1.1.92 tag 👉 https://github.com/jungsoft/materialui-daterange-picker/blob/1.1.92/package/src/components/Menu.tsx#L103
master branch 👉 https://github.com/jungsoft/materialui-daterange-picker/blob/master/package/src/components/Menu.tsx#L103

Would it be possible to release (or re-release) this to update package and remove this error?

Hi,

I want to add some more custom defined range to existing ones, for e.g: last 6 months, or last year.
If I add using definedRanges options, it just overrides the existing.
I want to append few more to existing date ranges.

I tried this but I think it doesn't suport function,
definedRanges={(prev: DefinedRange[]): DefinedRange[] => [
...prev,
{
label: 'Last 6 months',
startDate: new Date(),
endDate: (new Date().getMonth() - 6),
},
]}

Is there any way to append to existing date ranges?
Thanks

The package has React 16 as a peer dependency and needs to be updated for React 17.

I would be happy to raise a PR if ya'll would like me to.

How would you display the daterange as a modal / popper or something that is displayed relatively to an html element?

What is the purpose of .materialui-daterange-picker-makeStyles-dateRangeBackdrop-3 and why does it have width 100vw and height 100vh?

Using styled-components unable to style the component because className prop is missing.

How do I hide the column with "Today", "Yesterday", etc?

How to modify the text (different language)?

Hi!
Love your work, is there any plans for a responsive or mobile-friendly layout?
Maybe using the MUI layout with the xs/md/lg etc.

Thanks for this nice component.

Let's say I set maxDate to today's date (22, OCT, 2020). On the Date Picker, appears the month OCT 2020 on the left, and NOV 2020 on the right. The last is a completely disabled month, makes no sense to show it on the screen.

Is there a way to show the month of the maxDate on the right side of the Date Picker?

Hi!

We are currently using the date picker in a scenario where a user can selected a date range to enable filtering on a list of items.
Selection is working great!
We're instead encountering an issue in allowing the user to clear the selected range because from our understanding there is no way to programmatically clear the date range of the component.

This means that the date picker cannot be resetted to the initial state with no range highlighted on the calendar.

So, question is: are we missing something or the possibility to clear a selection is not there for now?
If the latter is true it would be great to have it!

Thanks for the great work done with this project!

P.s. will try to attach also a working demo if can help in clarifying.

Hi,

It's a very useful component, thank you for making it.

I was wondering if there is a way to change the background colour of the selected date and outline colour of the current date just using wrapperClassName or through some colour props?

I am using it in a non-mui project, so I can't really use mui-styles with it.

If there is no other way, Is it possible to consider adding colour props?

I have the date range picker as a child of a material-ui Popper component, which is anchored to the bottom of a button. When I open the date range picker, and try to change the moth or year, the select options are hidden.

           <Popper
                open={open}
                anchorEl={buttonBaseRef.current}
                style={{marginTop: theme.spacing(2)}}
            >
                <div>
                    <DateRangePicker
                        open={true}
                        toggle={focusHandler}
                        onChange={dateOutput}
                    />
                </div>
            </Popper>

Is this an issue with this date range picker, or, is this an issue with how I am using it?