Bootstrap Datepicker in TypeScript funktioniert nicht

Question

Ich bin ein Neuling zu Angular 4 und ich versuche, eine Art jQuery Aufruf von meinem HTML zu machen. Ich habe versucht, diesen jQuery Anruf in eine TypeScript Methode einzuwickeln. Nach dem Klicken auf die Kalenderschaltfläche erscheint nichts.

Ich bin unsicher, welche Zeile genau in meinem index.html hinzufügen.

Unten ist mein Code-Schnipsel:

home.component.html

<h2>As of date</h2> 
<div class="input-group" style="width: 230px"> 
    <input class="form-control date" type='text' placeholder="dd/mm/yyyy" id="date-picker"/> 
    <span class="input-group-btn"> 
     <button class="btn btn-primary btn-icon" (click)="pickDate()"> 
     <i class="fa fa-calendar-o"></i> 
     </button> 
    </span> 
</div> 

home.component.ts

import { Component, OnInit } from '@angular/core'; 
    import { TranslateService } from '@ngx-translate/core'; 
    import { TasksService } from 'app/shared'; 


     @Component({ 
      selector: 'MyFirstAngularApplication-home', 
      styleUrls: [ './home.component.scss' ], 
      templateUrl: './home.component.html' 
     }) 

     export class HomeComponent { 
      pickDate() { 
      $('#date-picker').datepicker('show'); 
      } 
     } 

Wo genau werde ich da falsch?

Answer 1

1. Import jquery.min.js in home.component.html.

2. In home.component.ts erklären jquery und $ Vars wie:

   declare var jquery: any; deklarieren var $: any;

Sie jetzt durch

Answer 2

die Sie interessieren,

Bevor hinzugefügt Bedarf installiert werden jquery in Winkel Projekt über den Befehl sein sollte wie

npm installieren jquery

Index. Html

home.component.ts

import { Component, OnInit } from '@angular/core'; 
import { TranslateService } from '@ngx-translate/core'; 
import { TasksService } from 'app/shared'; 
declare var $: any; 

    @Component({ 
     selector: 'MyFirstAngularApplication-home', 
     styleUrls: [ './home.component.scss' ], 
     templateUrl: './home.component.html' 
    }) 

    export class HomeComponent { 
     pickDate() { 
     $("#date-picker").datepicker();    
     } 
    }