ng2-bootstrap-base-modified/demo/src/app/components/+datepicker/demos/datepicker-demo.component.html

Native Angular Bootstrap Components Typeahead modified

<style>
  .full button span {
    background-color: limegreen;
    border-radius: 32px;
    color: black;
  }
  .partially button span {
    background-color: orange;
    border-radius: 32px;
    color: black;
  }
</style>

<div>
  <div class="card">
    <pre class="card-block card-header">Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
  </div>
  <h4>Inline</h4>
  <div style="display:inline-block; min-height:290px;">
    <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true" [dateDisabled]="dateDisabled"></datepicker>
  </div>

  <hr />
  <button type="button" class="btn btn-sm btn-info" (click)="today()">Today</button>
  <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="d20090824();">2009-08-24</button>
  <button type="button" class="btn btn-sm btn-danger" (click)="clear()">Clear</button>
  <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="toggleMin()" tooltip="After today restriction">Min date</button>
  <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="disableTomorrow()">Disable Tomorrow</button>
</div>