feat(datepicker): Added functionality to add a custom class to specif…

…ic dates. Supports empty custom class.
valor-software · Mar 17, 2016 · 0f6389f · 0f6389f
1 parent 01b0184
commit 0f6389f
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 11 deletions.
diff --git a/components/datepicker/datepicker-inner.ts b/components/datepicker/datepicker-inner.ts
@@ -91,9 +91,8 @@ export class DatePickerInner implements OnInit {
   private onlyCurrentMonth:boolean;
   @Input()
   private shortcutPropagation:boolean;
-  // todo: change type during implementation
   @Input()
-  private customClass:any;
+  private customClass:Array<{date:Date, mode:string, clazz:string}>;
   // todo: change type during implementation
   @Input()
   private dateDisabled:any;
@@ -232,15 +231,25 @@ export class DatePickerInner implements OnInit {
   private createDateObject(date:Date, format:string):any {
     let dateObject:any = {};
     dateObject.date = date;
+    dateObject.date.setHours(0, 0, 0, 0);
     dateObject.label = this.dateFilter(date, format);
     dateObject.selected = this.compare(date, this.selectedDate) === 0;
     dateObject.disabled = this.isDisabled(date);
     dateObject.current = this.compare(date, new Date()) === 0;
-    // todo: do it
-    // dateObject.customClass = this.customClass({date: date, mode: this.datepickerMode}) || {};
+    dateObject.customClass = this.getCustomClassForDate(dateObject.date);
     return dateObject;
   }
 
+  private getCustomClassForDate(date:Date) {
+    if (!this.customClass) {
+      return '';
+    }
+    var customClassObject:{date:Date, mode:string, clazz:string} = this.customClass.find(customClass => {
+      return customClass.date.valueOf() === date.valueOf() && customClass.mode === this.datepickerMode;
+    }, this);
+    return customClassObject === undefined ? '' : customClassObject.clazz;
+  };
+
   private isDisabled(date:Date):boolean {
     // todo: implement dateDisabled attribute
     return ((this.minDate && this.compare(date, this.minDate) < 0) ||

diff --git a/components/datepicker/datepicker.ts b/components/datepicker/datepicker.ts
@@ -64,12 +64,11 @@ export class DatePicker implements ControlValueAccessor {
   @Input() public yearRange:number;
   @Input() public onlyCurrentMonth:boolean;
   @Input() public shortcutPropagation:boolean;
+  @Input() public customClass:Array<{date:Date, mode:string, clazz:string}>;
   @Input() public get activeDate():Date {
     return this._activeDate || this._now;
   }
   // todo: change type during implementation
-  public customClass:any;
-  // todo: change type during implementation
   @Input() public dateDisabled:any;
 
   constructor(@Self() public cd:NgModel) {

diff --git a/components/datepicker/daypicker.ts b/components/datepicker/daypicker.ts
@@ -12,9 +12,8 @@ const TEMPLATE_OPTIONS:any = {
     `,
     WEEK_ROW: `
         <td [hidden]="!datePicker.showWeeks" class="text-xs-center h6"><em>{{ weekNumbers[index] }}</em></td>
-        <!--  [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"
+          <button type="button" style="min-width:100%;" class="btn btn-sm {{dtz.customClass}}"
                   *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"
@@ -32,9 +31,8 @@ const TEMPLATE_OPTIONS:any = {
     `,
     WEEK_ROW: `
         <td [hidden]="!datePicker.showWeeks" class="text-center h6"><em>{{ weekNumbers[index] }}</em></td>
-        <!--  [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"
+          <button type="button" style="min-width:100%;" class="btn btn-default btn-sm {{dtz.customClass}}"
                   *ngIf="!(datePicker.onlyCurrentMonth && dtz.secondary)"
                   [ngClass]="{'btn-info': dtz.selected, active: datePicker.isActive(dtz), disabled: dtz.disabled}"
                   [disabled]="dtz.disabled"

diff --git a/components/datepicker/readme.md b/components/datepicker/readme.md
@@ -33,7 +33,7 @@ export const DATEPICKER_DIRECTIVES:Array<any> = [DatePicker];
   - `minDate` (`?Date=null`) - oldest selectable date
   - `maxDate` (`?Date=null`) - latest selectable date
   - `dateDisabled` (`?Array<{date:Date, mode:string}>`) - array of disabled dates if `mode` is `day`, or years, etc.
-  - `customClass` (`?Array<{date:Date, mode:string, class: strung}>`) - array of custom classes to be applied to targeted dates
+  - `customClass` (`?Array<{date:Date, mode:string, clazz:string}>`) - array of custom css classes to be applied to targeted dates
   - `showWeeks` (`?boolean=true`) - if `false` week numbers will be hidden
   - `startingDay` (`?number=0`) - starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday).
   - `initDate` (`?Date`) - default date to show if `ng-model` value is not specified