jungsoft / materialui-daterange-picker Goto Github PK
View Code? Open in Web Editor NEWThis project forked from flippingbitss/react-daterange-picker
A react date range picker implementation using @material-ui.
License: MIT License
This project forked from flippingbitss/react-daterange-picker
A react date range picker implementation using @material-ui.
License: MIT License
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 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.
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.
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,
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?
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]);
...
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.
import { StylesProvider } from '@material-ui/core/styles'
- it doesn't work, you must use import { StylesProvider } from '@material-ui/styles'
instead
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?
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?
selected start date and end date then on click on the enter button function not working and the date picker also not closing
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:
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.
The package has React 16 as a peer dependency and needs to be updated for React 17.
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?
Hi,
Is there any way to close the date range picker on tabbing away?
closeOnClickOutside doesn't seem to work.
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;
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`.
The app built successfully
I need to add @material-ui/system
as dependency to make the app works.
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,
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
I get a build fail in my Jenkins pipeline due to @material-ui-icons dependency. Any idea to fix this?
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.
How do I change the language? I would like to put it in PT-BR
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.