Light
Dark
System
Ask  Question

Date Range Picker in React

Why is there no date range picker component in react similar to the one in HTML ? Now if I have to use any other date range picker then I am not able because the npm package itself is not being installed. Help me out here please !
user
Aagam Jain 5 months ago
React
9 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (9)

user
Lauris Stepanovs Author5 months ago
Hi Aagam,

Date Range Picker solution used in our HTML version requires jQuery and combining jQuery with any of SPA isn't good practice, if you have such a requirement you can add jQuery and reuse our solution from the HTML version.

Alternatively, you can consider using the dependency below:
https://www.npmjs.com/package/react-date-range

Regards,
Lauris Stepanovs,
Keenthemes Support Team
user
Aagam Jain 5 months ago
Hey Lauris,

I tried installing this npm package already. But it is giving some dependency error.

npm ERR!
npm ERR! While resolving: react-table@7.7.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR! peer react@"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" from @react-aria/ssr@3.2.0

How do I resolve this ?
user
Lauris Stepanovs Author5 months ago
Hi Aagam,

Unfortunately, we were not able to reproduce this issue in the latest Metornic version.

Could you please specify which Metronic version are you using?

Also if you have modified anything in our codebase please describe those changes.

Regards,
Lauris Stepanovs,
Keenthemes Support Team
user
Aagam Jain 5 months ago
Lauris I am using 8.1.5 version of metronic and this is the latest one as per changelogs of react.

If i use the --force tag while installing it installs but gives problem as already advised.
user
Lauris Stepanovs Author5 months ago
Hi,

Also, could you please tell me your npm and node versions?

The command below didn't throw any errors in the latest Metronic version:
npm i react-date-range



Regards,
Lauris Stepanovs,
Keenthemes Support Team
user
Aagam Jain 5 months ago
npm - 8.19.3v
node - 16.19.0v
react - 18.0.0v
user
Lauris Stepanovs Author5 months ago
Hi,

Try to do the followings:
Delete node_modules and package-lock.json/yarn.lock.
Try clearing out npm cache npm cache clean --force
Install dependency again with npm i react-date-range command.

Regards,
Lauris Stepanovs,
Keenthemes Support Team
user
Aagam Jain 5 months ago
Thanks Lauris. This worked. But this wasn't the optimistic way of doing it is what I think.
Do you have any idea what was the reason behind this ??
user
Lauris Stepanovs Author5 months ago
Hi,

Most likely this is due to dependency conflicts. We will check this issue in more detail and try to include a fix in the next releases.

Regards,
Lauris Stepanovs,
Keenthemes Support Team
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle