fix(datepicker): display 'outsideDays' correctly for multiple months

Moves 'outsideDays' calculation to the service Closes #2421 Fixes #2035
ng-bootstrap · Jun 4, 2018 · 26b8f3b · 26b8f3b
1 parent cd14b96
commit 26b8f3b
Show file tree

Hide file tree

Showing 10 changed files with 306 additions and 211 deletions.
diff --git a/demo/src/app/components/datepicker/demos/multiple/datepicker-multiple.html b/demo/src/app/components/datepicker/demos/multiple/datepicker-multiple.html
@@ -1,5 +1,6 @@
 
-<ngb-datepicker [displayMonths]="displayMonths" [navigation]="navigation" [showWeekNumbers]="showWeekNumbers">
+<ngb-datepicker [displayMonths]="displayMonths" [navigation]="navigation"
+                [showWeekNumbers]="showWeekNumbers" [outsideDays]="outsideDays">
 </ngb-datepicker>
 
 <hr/>
@@ -8,7 +9,7 @@
   <div class="form-group">
     <div class="input-group">
       <input class="form-control" placeholder="yyyy-mm-dd"
-             name="dp" [displayMonths]="displayMonths" [navigation]="navigation"
+             name="dp" [displayMonths]="displayMonths" [navigation]="navigation" [outsideDays]="outsideDays"
              [showWeekNumbers]="showWeekNumbers" ngbDatepicker #d="ngbDatepicker">
       <div class="input-group-append">
         <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
@@ -21,7 +22,7 @@
 
 <hr/>
 
-<div class="d-flex">
+<div class="d-flex flex-wrap align-content-between p-2">
   <select class="custom-select" [(ngModel)]="displayMonths">
     <option [ngValue]="1">One month</option>
     <option [ngValue]="2">Two months</option>
@@ -38,5 +39,11 @@
     <option [ngValue]="true">Week numbers</option>
     <option [ngValue]="false">No week numbers</option>
   </select>
+
+  <select class="custom-select" [(ngModel)]="outsideDays">
+    <option value="visible">Visible outside days</option>
+    <option value="hidden">Hidden outside days</option>
+    <option value="collapsed">Collapsed outside days</option>
+  </select>
 </div>
 
diff --git a/demo/src/app/components/datepicker/demos/multiple/datepicker-multiple.ts b/demo/src/app/components/datepicker/demos/multiple/datepicker-multiple.ts
@@ -5,7 +5,7 @@ import {Component} from '@angular/core';
   templateUrl: './datepicker-multiple.html',
   styles: [`
     select.custom-select {
-      margin-right: 0.5rem;
+      margin: 0.5rem 0.5rem 0 0;
       width: auto;
     }
   `]
@@ -15,4 +15,5 @@ export class NgbdDatepickerMultiple {
   displayMonths = 2;
   navigation = 'select';
   showWeekNumbers = false;
+  outsideDays = 'visible';
 }