Usage with Angular 2+

[akildemir]

hello, I have been trying to use this plugin with angular 6. I have a calendar logo and want to show the calendar on click. I have an input tag in the component that I want to show it and I'm assigning the calendar to this input that from the component's ts file. I'm calling the datepicker.open()from a function in the ts file. The calendar opens no problem here but it doesn't open in the input that I have assigned, instead it inserts the html at the end of the body tag in the ìndex.htmlfile. Also there is no css being assigned to it. Just raw html. Here is my ts file:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import TinyDatePicker from 'tiny-date-picker';

@Component({
  selector: 'example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  dp: any;

  constructor() {}
 
   ngOnInit() {
        this.dp = TinyDatePicker(document.getElementById('tinyDatePicker'));
  }

 openDateBox(){
    this.dp.open();
  }

And here is my example.component.html,

<div class="col-sm">
          <label for="Date"><b>Date: </b></label>
          <div (click)="openDateBox()" style="width: 30px; height: 30px; display: inline-block; margin-left: 20px;">
                <img src=".path/to/some_image.jpg" style="width: 100%; height: 100%;" alt="">
          </div>
          <div style="width: 80px; height: 80px;" >
                <input type="text" id="tinyDatePicker" hidden='true'>
         </div>
</div>

Here is how my component looks before click:

https://imgur.com/a/b4U19PR

And this is after click to calendar logo:

https://imgur.com/a/QUnAqCA

What am I doing wrong or missing?

[machadodev]

Hey man, how's it going?

I had the same problem.

You have to import tiny date picker css.

In VueJS you can solve like this:

Or like this:

And this is the result:

You just have to adjust it to angular.
Hope it helps :)