2016-06-21 18 views
4

Ich benutze Bootstrap 3 in der eckigen 2. Aber kann keine hilfreiche Demo oder Beispiele aus Online-Dokumente finden.Wie benutze ich Bootstrap 3 Datepicker in angular 2

Wenn ich hinzufügen Zeitauswahl in der Vorlage, wie folgend:

<div class='input-group date' id='datetimepicker3'> 
    <input type='text' class="form-control" #datePicker [ngModel]="f.ArrivalTime" (blur)="date = datePicker.value" /> 
     <span class="input-group-addon"> 
     <span class="glyphicon glyphicon-time"></span> 
     </span> 
     <script type="text/javascript"> 
      $(function() { 
       $('#datetimepicker3').datetimepicker({ 
        format: 'LT' 
       }); 
      }); 
     </script> 
</div> 

Wenn ich die Zeit Schaltfläche klicken, gibt es keine Antwort.

+0

Ich weiß Bootstrap Datepicker nicht. Woher kommt '.datetimepicker (...)'? Sie brauchen möglicherweise nicht den '$()' Teil aus meiner Antwort. –

+0

Kannst du bitte sagen, welche Version oder wo du diesen Datepicker bekommst? –

Antwort

3

Skript-Tags werden aus Vorlagen entfernt. Sie müssen andere Mittel verwenden, um das Skript zu laden.

So etwas wie dies funktionieren könnte (nicht getestet)

@Component({ 
    selector: 'some-comp', 
    template: `<div #datetimepicker></div>` 
}) 
class SomeComp { 
    @ViewChild('datetimepicker') dateTimePicker:ElementRef; 
    ngAfterViewInit() { 
    $(this.dateTimePicker.nativeElement).datetimepicker({format: 'LT'}); 
    } 
} 
0

Sie ui-bootstrap verwenden könnten für Winkel 2.

Es wird von dem Winkel Team gemacht wird Ich glaube, und sie bieten Bootstrap-Richtlinien für beiden Winkel 1 und 2.

Verwandte Themen