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

DateRangePicker in Metronic 8 Angular


Hello,
we would like to use the html version of DateRangePicker from Metronic in the Angular implementation, while preserving all of the styles. Is there any compatibility issue that is preventing it from being already available in the Angular demo version?

Thank you


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 (6)


Hi,

The HTML version of DateRangePicker from Metronic should be compatible with Angular. However, it may require some adjustments to integrate properly with the Angular implementation. We recommend checking the plugins' documentation and ensuring that all necessary files and dependencies are included in the Angular project. If you encounter any specific compatibility issues, please let us know and we will do our best to assist you.

Thanks



Does this mean you have angular integration already setup for daterangepicker or do we need to create a component/directive for it?



Hello Arnold, we ended up using the ngx-daterangepicker-bootstrap package for better Angular integration. The styling is not 100% identical to the HTML version of Metronic, but it is acceptable for us. Hope this helps



we were trying to avoid that tho since metronic already has a daterangepicker. but ill check that lib if i have no other choice. tnx



we thought the same but the original library has a jQuery dependency that is better to avoid in angular. Even if you take your time to integrate it well, you will always have to deal with jquery from the time to come. After some time thinking about this, we decided to give up.



Hi Arnold,

DateRangePicker is a jQuery plugin, meaning it relies on jQuery as a dependency. However, it's essential to be cautious when using jQuery in Angular projects. Angular offers its own set of tools and libraries to handle DOM manipulation and event handling.

Rather than directly using the DateRangePicker jQuery plugin, I recommend exploring Angular-specific alternatives or libraries that offer similar functionality. This approach will help you maintain a consistent and Angular-friendly codebase, reducing the chances of conflicts and issues related to jQuery integration.

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