feat(datepicker): Added an attribute onlyCurrentMonth which if true w…

…ill not show dates from previous and next month (to make a full week of 7 days). So it will show dates only from currently displayed month.
valor-software · Mar 3, 2016 · 529af20 · 529af20
1 parent a80fee1
commit 529af20
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/components/datepicker/datepicker-inner.ts b/components/datepicker/datepicker-inner.ts
@@ -15,6 +15,7 @@ const DATEPICKER_MODE:string = 'day';
 const MIN_MODE:string = 'day';
 const MAX_MODE:string = 'year';
 const SHOW_WEEKS:boolean = true;
+const ONLY_CURRENT_MONTH:boolean = false;
 const STARTING_DAY:number = 0;
 const YEAR_RANGE:number = 20;
 const MIN_DATE:Date = null;
@@ -86,6 +87,8 @@ export class DatePickerInner implements OnInit {
   @Input()
   private formatMonthTitle:string;
   @Input()
+  private onlyCurrentMonth:boolean;
+  @Input()
   private shortcutPropagation:boolean;
   // todo: change type during implementation
   @Input()
@@ -132,6 +135,7 @@ export class DatePickerInner implements OnInit {
     this.formatDayTitle = this.formatDayTitle || FORMAT_DAY_TITLE;
     this.formatMonthTitle = this.formatMonthTitle || FORMAT_MONTH_TITLE;
     this.showWeeks = (this.showWeeks === undefined ? SHOW_WEEKS : this.showWeeks);
+    this.onlyCurrentMonth = (this.onlyCurrentMonth === undefined ? ONLY_CURRENT_MONTH : this.onlyCurrentMonth);
     this.startingDay = this.startingDay || STARTING_DAY;
     this.yearRange = this.yearRange || YEAR_RANGE;
     this.shortcutPropagation = this.shortcutPropagation || SHORTCUT_PROPAGATION;

diff --git a/components/datepicker/datepicker.ts b/components/datepicker/datepicker.ts
@@ -35,6 +35,7 @@ import {YearPicker} from './yearpicker';
                       [customClass]="customClass"
                       [dateDisabled]="dateDisabled"
                       [templateUrl]="templateUrl"
+                      [onlyCurrentMonth]="onlyCurrentMonth"
                       [shortcutPropagation]="shortcutPropagation">
       <daypicker tabindex="0"></daypicker>
       <monthpicker tabindex="0"></monthpicker>
@@ -61,6 +62,7 @@ export class DatePicker implements ControlValueAccessor {
   @Input() public formatMonthTitle:string;
   @Input() public startingDay:number;
   @Input() public yearRange:number;
+  @Input() public onlyCurrentMonth:boolean;
   @Input() public shortcutPropagation:boolean;
   @Input() public get activeDate():Date {
     return this._activeDate || this._now;

diff --git a/components/datepicker/daypicker.ts b/components/datepicker/daypicker.ts
@@ -15,6 +15,7 @@ const TEMPLATE_OPTIONS:any = {
         <!--  [ngClass]="dtz.customClass" -->
         <td *ngFor="#dtz of rowz" class="text-xs-center" role="gridcell" [id]="dtz.uid">
           <button type="button" style="min-width:100%;" class="btn btn-sm"
+                  *ngIf="!(datePicker.onlyCurrentMonth && dtz.secondary)"
                   [ngClass]="{'btn-secondary': !dtz.selected && !datePicker.isActive(dtz), 'btn-info': dtz.selected || !dtz.selected && datePicker.isActive(dtz), disabled: dtz.disabled}"
                   [disabled]="dtz.disabled"
                   (click)="datePicker.select(dtz.date)" tabindex="-1">
@@ -34,6 +35,7 @@ const TEMPLATE_OPTIONS:any = {
         <!--  [ngClass]="dtz.customClass" -->
         <td *ngFor="#dtz of rowz" class="text-center" role="gridcell" [id]="dtz.uid">
           <button type="button" style="min-width:100%;" class="btn btn-default btn-sm"
+                  *ngIf="!(datePicker.onlyCurrentMonth && dtz.secondary)"
                   [ngClass]="{'btn-info': dtz.selected, active: datePicker.isActive(dtz), disabled: dtz.disabled}"
                   [disabled]="dtz.disabled"
                   (click)="datePicker.select(dtz.date)" tabindex="-1">
@@ -84,9 +86,11 @@ const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme ||
     </tr>
   </thead>
   <tbody>
-    <tr *ngFor="#rowz of rows;#index=index">
-      ${CURRENT_THEME_TEMPLATE.WEEK_ROW}
-    </tr>
+    <template ngFor [ngForOf]="rows" #rowz="$implicit" #index="index">
+      <tr *ngIf="!(datePicker.onlyCurrentMonth && rowz[0].secondary && rowz[6].secondary)">
+        ${CURRENT_THEME_TEMPLATE.WEEK_ROW}
+      </tr>
+    </template>
   </tbody>
 </table>
   `,

diff --git a/components/datepicker/readme.md b/components/datepicker/readme.md
@@ -18,7 +18,8 @@ import {DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
     'formatDay', 'formatMonth', 'formatYear',
     'formatDayHeader', 'formatDayTitle', 'formatMonthTitle',
     'yearRange',
-    'shortcutPropagation'
+    'shortcutPropagation',
+    'onlyCurrentMonth'
   ]
 })
 
@@ -46,6 +47,7 @@ export const DATEPICKER_DIRECTIVES:Array<any> = [DatePicker];
   - `formatMonthTitle` (`?string='yyyy'`) - format of title when selecting month
   - `yearRange` (`?number=20`) - number of years displayed in year selection
   - `shortcutPropagation` (`?boolean=false`) - if `true` shortcut`s event propagation will be disabled
+  - `onlyCurrentMonth` (`?boolean=false`) - if `true` only dates from the currently displayed month will be shown
 
 <!--
 ### Date picker popup properties