wojtekmaj / react-daterange-picker Goto Github PK

./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

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!

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.

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.

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]

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

Per https://www.npmjs.com/package/react-date-picker

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?

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

I just installed and copied the example code from readme.md

And then get this error,

My project is on Next.js

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.

Not sure why but the calendar appears on the wrong position. Here's a screenshot.

Using daterange picker in my react js application.
Using version: 2.4.0

Issues:

• Input fields for date & month accepts any length values
• Input field for year field have min:1000 and max: 275760

Hey, do you plan to support theming\bootstrap?

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!

Any plans for such a component?

I'm creating a range selector from where I have to restrict some dates from selecting?

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?

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'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

http://projects.wojtekmaj.pl/react-daterange-picker/

mentioned in the readme does not exist (404)

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.

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!

At input field day when i press 0 then 1 it automatic fill 001

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

Can I change the icon of the calendar button in the input?

Hi
when I turn the page forward and change the month, I want to get the current page turning month. Is there any way? Or add a page flip event?

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!

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.

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.

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

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.

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.

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.

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.

unexpected token .

1 | module.exports = require("@wojtekmaj/react-daterange-picker");
tafak?

when use '@wojtekmaj/react-daterange-picker/dist/entry.nostyle' its ok

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>
    );
  }
}

Title basically says it all... no dist file in the repo so it can't be used out of the box

Latest version of react.

When selecting a date, the whole app turns white. Any idea if there's breaking changes?

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.

When I manually type in the date (month/day) I typically enter in the leading zero if the month/day is < 10. However, the date-picker will still add it's own "leading" zero and I am left with 3 digits for the month/day.

This currently can be seen in the online demo.

Is it possible to have 2 adjacent calendars to allow for selecting ranges accross 2 months and if so how?

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

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

I would like to disable the inputs so the user can only select from a calendar and not type it

All of sudden, the styling is not being shown.

Using @wojtekmaj/[email protected]