Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

React Datepicker


Hi there,

I am trying to implement a Date picker for react, because I don't seem to find it in the docs. I have added the Flatpicker react version that is used in the HTML theme from here: https://github.com/haoxins/react-flatpickr

Can you please guide me how to add the same styling that is already present in the html version?

Adding

@import "flatpickr";
to
_metronic/assets/sass/core/vendors/plugins/_plugins.react.scss did not seem to do the trick.

Thanks!


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)


Hi,

We aren't familiar with https://github.com/haoxins/react-flatpickr.
Anyway, try to merge the HTML nested structure of the component, you have to use the same CSS classes as we have in /src/_metronic/assets/sass/core/vendors/plugins/_flatpickr.scss file.

Regards,
Keenthemes support



Hi,

Thanks for your response. It is the official recommendation by the Flatpicker used in the html: https://github.com/flatpickr/flatpickr
(bottom of the docs)

It should use all the same classes.

Can you please clarify what needs to be merged?

Thank you.



Try to merge html+css classes nested structure of the component (in developer tools),
They should be the same as in the HTML version.



Hi Carmelo,

I'm sorry, I still don't understand what you mean. I would just like to import the existing Metronic flatpickr styles used in the html demos into a react component.

Since we are talking about this, is there any specific reason you didn't not implement flatpickr's react package into the react demos? Is there a better alternative advised for Metronic React?

Thanks!



Hi.

Sets of functionalities in HTML and React versions are different, mainly cause the HTML version is older than React by 5 years. But we are implementing features from the HTML in React one by one, but we have a list of features that have greater priority than flatpickr.
About alternative, I would suggest classic bootstrap datepicker: https://www.npmjs.com/package/react-datepicker.

Regards,
Keenthemes support



I should take its css file and transform it into styles of Metronic theme?
I don't understand how to make view of react-datepicker cimilar to all the others metronic controls...



Thanks Carmelo, will look into your suggestion: https://www.npmjs.com/package/react-datepicker

We don't insist on any particular package, just would appreciate to have a Date picker in the react version with coherent styling that fits with the rest of the theme. If this is on your todo list, any solution will be great for us to use.

Thanks!



Hi,

For now, it's not possible to have Datepicker without installing a 3d-party library in the current project. Cause of that I suggested using https://www.npmjs.com/package/react-datepicker for now. (once the Metronic React Datepicker example is ready we will release it).

Regards,
Keenthemes support



Hi Carmelo,
I'm also looking for a Date picker and wondering if there is any progress on having a datepicker for Metronic React or do we have to use a 3rd part as you've suggested.

Cheers,
P


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