How to use Bootstrap 3 Datepicker in angular 2

Question

I am using Bootstrap 3 in the angular 2. But can't find any helpful demo or examples from online docs.

When I add time picker in the template as following:

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

When I click the time button, there is no response.

I don't know Bootstrap Datepicker. Where does .datetimepicker(...) come from? You might not need the $() part from my answer. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jun 21, 2016 at 12:45
Can you please tell which version or where you get this datepicker — Long Field
– Long Field, Commented Aug 17, 2017 at 4:45

Günter Zöchbauer · Accepted Answer · 2016-12-07 12:17:52Z

3

Script tags are removed from templates. You need to use other means to load the script.

Something like this might work (not tested)

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

edited Dec 7, 2016 at 12:17

answered Jun 21, 2016 at 12:44

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matej · Accepted Answer · 2016-06-21 13:26:20Z

0

You could use ui-bootstrap for angular 2.

It is made by the angular team I believe and they provide bootstrap directives for both angular 1 and 2.

answered Jun 21, 2016 at 13:26

Matej

9,8738 gold badges52 silver badges68 bronze badges

Collectives™ on Stack Overflow

How to use Bootstrap 3 Datepicker in angular 2

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related