GithubHelp home page GithubHelp logo

jungsoft / materialui-daterange-picker Goto Github PK

View Code? Open in Web Editor NEW

This project forked from flippingbitss/react-daterange-picker

70.0 70.0 81.0 1.94 MB

A react date range picker implementation using @material-ui.

License: MIT License

TypeScript 94.28% JavaScript 5.72%

materialui-daterange-picker's People

Contributors

droborg avatar ffmathy avatar flippingbitss avatar hayk94 avatar jungrafael avatar pedro-lb avatar thealphaversion avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

materialui-daterange-picker's Issues

Unable to append custom defined range to existing

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

Positioning, styles, i18n

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)?

Changing the background color of selected date and outline color of the current date

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?

Range error when selectedRange smaller or larger than validatedRange

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]);
...

Update peer dependencies

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.

Customization issue with package

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?

image

MaxDate and Min Date not working

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
check

Material-UI Grid: Pass justifyContent prop, instead of justify

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?

image

It is possible to choose the default months to show?

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?

Timezones date range bugs

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:

timezone -8 last week
timezone -8 this month

Can't reset selection

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.

Today and yesterday do not work

when i click toady and yesterday it will return two same time for startDate and endDate:
today
yesterday
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,

Month and Year Selects hidden when using Popper and anchor ref

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?

styleFunctionSx error if using with @material-ui/core

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

Responsive / mobile friendly

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.

Locale

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

Show previous month and current month in the calendar when it opens up

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.