I successfully integrated an angular material 2 date-picker into a bootstrap modal form:
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
<div class="timeline-cal">
<input class="date-field" [mdDatepicker]="picker" placeholder="Choose a date">
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
<md-datepicker #picker></md-datepicker>
</div>
<div class="modal-footer">
<button type="button" class="btn grey-btn pull-right" (click)="cancel()">Cancel</button>
</div>
</div>
</div>
However, there is an issue where clicking the button opens the datepicker in the background instead of within the modal dialog. I attempted the following fix without success:
.mat-datepicker-content{ z-index: 1200}