wojtekmaj / react-daterange-picker Goto Github PK
View Code? Open in Web Editor NEWA date range picker for your React app.
Home Page: https://projects.wojtekmaj.pl/react-daterange-picker
License: MIT License
A date range picker for your React app.
Home Page: https://projects.wojtekmaj.pl/react-daterange-picker
License: MIT License
In daterange picker, when I use format='MMM, dd yy' or format='MMM dd yy', there appears a dropdown of months alongside the calendar popup. Is there any way to turn off the month dropdown?
Hii, i m used used this package and working properly but i was required only date and time but Timezone is bot require, so can you give me datetime string feature without timezone?? i was send the screen shot, what exactly getting from output when i was using dateRange
Example: "Fri Dec 20 2019 00:00:00 GMT+0530 (India Standard Time)" ==> Getting this string
and what i was need from you
Example: "Fri Dec 20 2019 00:00:00 GMT+0530"
can you give me that type return value ??
So far this has proven to be a very nice package. One issue I have is the design we are working with requires us to have [start date] to [end date] where this package only uses "–". Im not familiar with overriding an npm package and thus asking here if its possible to get a prop of "divider" which can take a string or jsx element to be used in place of the default?
Thanks
using react-testing library and jest throw an error TypeError: CSS.supports is not a function
temporary fix: adding global.CSS = { supports: jest.fn() };
the issue is related to react-fit package.
update: react-fit is used also in react-date-picker so i guess the same error should happen.
I have proble with width of input text field. I see that in style component insert width with width of arrow spinners. I add this style
.react-date-picker__button__input__input::-webkit-outer-spin-button,
.react-date-picker__button__input__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
but it not help me.
Hi @wojtekmaj ,
thanks for the package,
I have implemented the react-daterange-picker, but i want to get the value in format "dd-mm-yyyy",
but it was not working,
below is my code,
import React, { Component } from 'react';
import DateRangePicker from '@wojtekmaj/react-daterange-picker';
class MyApp extends Component {
state = {
date: [new Date(), new Date()],
}
render() {
console.log(this.state.date);
return (
<div>
<DateRangePicker
onChange={value => {
this.setState({ date: value });
}}
value={this.state.date}
format="dd-mm-yyyy"
/>
</div>
);
}
}
shows in format [Tue Jan 07 2020 10:55:20 GMT+0800 (Philippine Standard Time), Tue Jan 07 2020 10:55:20 GMT+0800 (Philippine Standard Time)]
but Expected [07-01-2020, 07-01-2020]
Min date issue.
I have simply added your package with non-other customization but the user can easily select any date.
class DateRangeInput extends Component {
state = {
date: [new Date(), new Date()]
};
onChange = date => this.setState({ date });
render() {
const { className, placeholder } = this.props;
return (
<div>
<DateRangePicker onChange={this.onChange} value={this.state.date} />
</div>
);
}
}
Hi, I'm wondering if it's possible for us to pass in our own text inputs to be used with this plugin? Taking a quick look through the source code, I didn't come across anything to do this, but I may be wrong?
I'm basically looking to use my own inputs, so I can show placeholders
when no date is selected; something similar to Start Date - End Date
. I can probably achieve this through adding my own styles and setting some flags in the onChange
prop, but I'm wondering if there's a more straight forward out-of-the-box solution?
Thanks!
http://projects.wojtekmaj.pl/react-daterange-picker/
mentioned in the readme does not exist (404)
Hi i'm importing nostyle mode but get error
in ./node_modules/react-fit/dist/Fit.js
Module build failed: ReferenceError: Unknown plugin "@babel/proposal-class-properties"
and if using styled one get unexpecetd token . (dot)
could you show me how to fix?
Hi Wojtek,
Thank you for your great work!
I think it would be a good feature to have access to all dates within given range, not only to an array of a starting and ending date. What do you think about that?
Of course it is possible to calculate it basing only on those two dates but build in version would be more elegant and less time-consuming :)
Or maybe there is already a possibility to achieve what I'm thinking about, ie. I need to have a range of dates which will be send to backend and then to db in order to get it from another calendar (in different place in app) which will use it as disabled dates (using it as a range)?
Thanks again!
./src/components/organismes/AddItemForm/AddItemForm.js
Line 5: Unable to resolve path to module 'react-daterange-picker' import/no-unresolved
i installed both yarn and npm but getting this error..but package is showing in node_modules folder
i tried this on two projects, getting same error
Hey, do you plan to support theming\bootstrap?
Any plans for such a component?
Hi Wojtek, thank you for your great date range component!
But i have an issue when try to build package manually. How can i fix it?
yarn run build-js && yarn run copy-styles && yarn run build-styles
$ babel src -d dist --ignore __tests__
SyntaxError: src/DateRangePicker.jsx: Unexpected token (25:8)
23 | }
24 |
> 25 | state = {};
| ^
26 |
27 | get eventProps() {
28 | return makeEventProps(this.props);
error Command failed with exit code 1.
I'm looking for a library that handles date range selection for days, month and years but I'm currently using typescript. Any plan to include types definition here? I tried to generate one using dts-gen
but couldn’t
Hello,
I am trying to use your component on a react project but I am facing the following problem when I try to select a date range:
Uncaught TypeError: this.updater.enqueueCallback is not a function
React dependencies are declared as follow:
"react": "^16.0.0",
"react-dom": "^16.0.0",
Thank you for your help
I know you can format the inputs of the calendar but i would like to perform that also for the inputs so for example have a date in the format dd/MMM/yyyy
Hi, thanks for such a lightweight library. I really love using this. One problem. When I use it outside of the any modal, it works as expected. But when I have it inside React Modal, and I have the isOpen
defaults to true
, but it still doesn't open the calendar automatically when the modal opens. Can you please tell me where I am going wrong?
Thanks in advance.
Can I keep the calendar open, even after I selected the date range, but hide the wrapper footer element?
basically I only need the wrapper to be visible on screen and I need it to be persistent even after I finish my selection
The rangeDivider attribute does not change anything when passing a string like " to " for example.
This is my package.json dependencies
"dependencies": { "@material-ui/core": "^4.9.0", "@material-ui/icons": "^4.9.0", "@material-ui/styles": "^4.9.0", "@wojtekmaj/react-daterange-picker": "^2.5.0", "axios": "^0.19.0", "material-table": "^1.50.0", "moment": "^2.24.0", "prop-types": "^15.7.2", "react": "^16.8.6", "react-dom": "^16.8.6", "react-google-login": "^5.0.4", "react-router-dom": "^5.0.0" },
Here is a demo with the error.
On the month view "button.react-calendar__tile" has class "react-calendar__tile--rangeStart" / "react-calendar__tile--rangeEnd" only when range is selected by user. On initial state start and end points has only the class "react-calendar__tile--active"
I've highlighted the start and end dates on my calendar and when I set user's previous selections on componentDidMount the above classes are missing and my calendar looks silly :)
Latest version of react.
When selecting a date, the whole app turns white. Any idea if there's breaking changes?
Title basically says it all... no dist file in the repo so it can't be used out of the box
Hi,
I am trying to use the date range picker, but upon import, it displays the message of module not found:
./src/components/MyComponent.js Module not found: Can't resolve 'react-daterange-picker' in '/MyAppPath/components'
I have checked the node_modules directory and the 'react-daterange-picker' folder is there. And I have restarted node, re-installed everything but the error keeps appearing.
Am I missing something? Can anyone help me?
Thanks!
Hey, just an FYI that it looks like your NPM/Yarn install command is incorrect. The command you list:
yarn add react-daterange-picker
actually installs this package: https://github.com/onefinestay/react-daterange-picker (which is the one on the NPM registry: https://www.npmjs.com/package/react-daterange-picker).
I think you may need to register the package on NPM as a different name (perhaps scoped to your username?) or if it's already under a different name, it might be nice to update your README (I'm glad to submit a PR if you let me know the actual location!).
Just noticed this when trying to help someone out on StackOverflow who's trying to install your package.
Oh, also, it seems like the demo link is broken at the moment: http://projects.wojtekmaj.pl/react-daterange-picker/ returns a 404.
Hey guy,
Thanks for the awesome projects, been using this and calendar on my app.
A little feedback: Currently clicking on leading zeroes won't cause the calendar to appear. This is also the case with clicking the slashes between dates. I won't make assumptions as to whether this is intended behaviour, but it's something I'd like to change in my implementation.
I've tried manually forcing the calendar open when a click occurs on the input group wrapper by setting an open state on the parent onClick, but I can't tell the parent when the picker has closed, so it only works one time.
Having access to onOpen and onClose events regardless of a value change would help us have greater control over the picker. Therefore I request this as a feature.
Thanks a lot, let me know if I'm overlooking something. Or if this is something you're happy with including in the project I can make a pull request.
Joe
In DateRangePicker.jsx
the prop dateStates
is an array, however in CalendarDate.jsx
it expects an instance of Immutable.List
, this is raising a failed prop types error.
code:
this.state.date = [newDate(2020,1,5), new Date(2020,2,5)];
But in the DateRange picker on frontEnd it shows 2020/02/05 - 2020/03/05
Moves one month ahead for start date and end date.
Can I change the icon of the calendar button in the input?
Hi,
I´m trying to use the component as a filter startDate/endDate, when I´m having a "startDate" and don´t want to add endDate, I´m using null as a value for endDate, but If I want to add an endDate without resetting the startDate, I want to add just the new Date, not selecting startDate and endDate range all over again.
is it possible?
I think one way to do it is execute onChange function for startDate and also for endDate, not just for the range, I was checking on the react-calendar, this can be donde with allowPartialRange={true} prop, but we have no option to do it or access any props to the calendar in react-daterange-picker.
All of sudden, the styling is not being shown.
Using @wojtekmaj/[email protected]
Is it possible to have 2 adjacent calendars to allow for selecting ranges accross 2 months and if so how?
import DateRangePicker from 'react-daterange-picker';
results in
modules-runtime.js?hash=d1eecd73d908a65f4ba4ee86caaafed0fd902ce9:241 Uncaught Error: Cannot find module 'react-daterange-picker'
at makeMissingError (modules-runtime.js?hash=d1eecd73d908a65f4ba4ee86caaafed0fd902ce9:241)
at require (modules-runtime.js?hash=d1eecd73d908a65f4ba4ee86caaafed0fd902ce9:251)
at BasicRangePicker.js (BasicRangePicker.js:1)
at fileEvaluate (modules-runtime.js?hash=d1eecd73d908a65f4ba4ee86caaafed0fd902ce9:353)
at require (modules-runtime.js?hash=d1eecd73d908a65f4ba4ee86caaafed0fd902ce9:248)
at TradeDetails.js (TradeDetails.js:1)
at fileEvaluate (modules-runtime.js?hash=d1eecd73d908a65f4ba4ee86caaafed0fd902ce9:353)
at require (modules-runtime.js?hash=d1eecd73d908a65f4ba4ee86caaafed0fd902ce9:248)
at TradeCreateEditView.js (TradeCreateEditView.js:1)
at fileEvaluate (modules-runtime.js?hash=d1eecd73d908a65f4ba4ee86caaafed0fd902ce9:353)
Not sure if README is up-to-date or if this is a bug. Would really love to start using this in our project. I'm willing to help if you need it. Thanks!
I would like to disable the inputs so the user can only select from a calendar and not type it
Not sure why but the calendar appears on the wrong position. Here's a screenshot.
unexpected token .
1 | module.exports = require("@wojtekmaj/react-daterange-picker");
tafak?
when use '@wojtekmaj/react-daterange-picker/dist/entry.nostyle' its ok
I'm creating a range selector from where I have to restrict some dates from selecting?
First off, AMAZING project! I love all of your work.
The only issue I seem to be having is with this component - it seems as if the CSS is not loading for some reason. The demo link in the readme also seems to be down, so I can't see what it's even supposed to look like. Any thoughts?
It would be nice to add styles
prop so that it is much easy to customize styles.
Hello,
is there a bug or maybe I using the react-date-rangepicker in a wrong way ?
The prop showDoubleView
is taken from the react-calender
and should show 2 month
in react-date-rangepicker
, if I read this here correctly. But it seems it is not working.
<DateRangePicker
showDoubleView
/>
Here ist a simple example @ https://codesandbox.io/s/thirsty-rubin-ldt4z
According documentation, i use the following packages:
@wojtekmaj/react-daterange-picker": "2.5.0
react-calendar": "^3.0.1
Thank you!
Is there a way to unselect / clear the date range natively in the component?
I've also tried to set the value back to null but the browser becomes unresponsive and yields no error.
At input field day when i press 0 then 1 it automatic fill 001
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.