Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Datepicker angular


I am trying to use the new datepicker for angular with metronic 9.3.9:

https://keenthemes.com/metronic/tailwind/docs/components/date-picker

Adding

<!--begin::Basic Calendar-->
<div data-kt-date-picker="true" id="calendar">
</div>
<!--end::Basic Calendar-->

to any page does not show the calendar. The api does not specify an init() function that should be called.

Am I missing something?


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi Samuel

Sorry for the delay. In Angular, you need to initialize Metronic components after the view is ready. Use the MetronicInitService in your component's AfterViewInit lifecycle hook. Can you please try this?

/metronic-tailwind-angular/src/app/app.component.ts

constructor() {
this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
this.updateDemo();
// Delay initialization to ensure view is rendered
setTimeout(() => {
this.metronicInitService.init();
}, 0);
});
this.updateDemo();
}


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(