feat(datepicker): Add support to set custom classes on specific dates

Closes valor-software#3958
martintro · Jan 31, 2019 · 68bcd9a · 68bcd9a
1 parent 4c8f373
commit 68bcd9a
Show file tree

Hide file tree

Showing 20 changed files with 228 additions and 27 deletions.
diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts
@@ -19,6 +19,7 @@ import { DemoDatepickerMinModeComponent } from './demos/min-mode/min-mode.compon
 import { DemoDatepickerOutsideClickComponent } from './demos/outside-click/outside-click';
 import { DemoDatepickerPlacementComponent } from './demos/placement/placement';
 import { DemoDatepickerReactiveFormsComponent } from './demos/reactive-forms/reactive-forms.component';
+import { DemoDatepickerDateCustomClassesComponent } from './demos/date-custom-classes/date-custom-classes';
 
 import {
   DemoDatePickerSelectDatesFromOtherMonthsComponent
@@ -306,6 +307,14 @@ export const demoComponentContent: ContentSection[] = [
         description: `<p>Use different triggers ( for example <code>keydown</code>, <code>mouseenter</code> and
           <code>dblclick</code> ) to interact with datepicker</p>`,
         outlet: DemoDatepickerTriggersCustomComponent
+      },
+      {
+        title: 'Date custom classes',
+        anchor: 'date-custom-classes',
+        component: require('!!raw-loader?lang=typescript!./demos/date-custom-classes/date-custom-classes.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/date-custom-classes/date-custom-classes.html'),
+        description: `<p>Style dates with custom classes</p>`,
+        outlet: DemoDatepickerDateCustomClassesComponent
       }
     ]
   },

diff --git a/demo/src/app/components/+datepicker/demos/date-custom-classes/date-custom-classes.html b/demo/src/app/components/+datepicker/demos/date-custom-classes/date-custom-classes.html
@@ -0,0 +1,18 @@
+<div class="row">
+  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
+    <input class="form-control"
+           placeholder="Datepicker"
+           ngModel
+           bsDatepicker
+           [dateCustomClasses]="dateCustomClasses">
+  </div>
+  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
+    <input class="form-control"
+           placeholder="Daterangepicker"
+           ngModel
+           bsDaterangepicker
+           [dateCustomClasses]="dateCustomClasses">
+  </div>
+</div>
+
+
diff --git a/demo/src/app/components/+datepicker/demos/date-custom-classes/date-custom-classes.ts b/demo/src/app/components/+datepicker/demos/date-custom-classes/date-custom-classes.ts
@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { BsDatepickerDateCustomClasses } from 'ngx-bootstrap/datepicker';
+
+@Component({
+  selector: 'demo-datepicker-date-custom-classes',
+  templateUrl: './date-custom-classes.html'
+})
+export class DemoDatepickerDateCustomClassesComponent {
+  dateCustomClasses: BsDatepickerDateCustomClasses[];
+
+  constructor() {
+    let now = new Date();
+    let twoDaysAhead = new Date();
+    twoDaysAhead.setDate(now.getDate() + 2);
+    let fourDaysAhead = new Date();
+    fourDaysAhead.setDate(now.getDate() + 4);
+
+    this.dateCustomClasses = [
+      { date: now, classes: [] },
+      { date: twoDaysAhead, classes: ['bg-warning'] },
+      { date: fourDaysAhead, classes: ['bg-danger', 'text-warning'] }
+    ];
+  }
+}
diff --git a/demo/src/app/components/+datepicker/demos/index.ts b/demo/src/app/components/+datepicker/demos/index.ts
@@ -28,6 +28,7 @@ import { DemoDatepickerTriggersCustomComponent } from './triggers-custom/trigger
 import { DemoDatepickerTriggersManualComponent } from './triggers-manual/triggers-manual';
 import { DemoDatepickerValueChangeEventComponent } from './value-change-event/value-change-event';
 import { DemoDatePickerVisibilityEventsComponent } from './visibility-events/visibility-events';
+import { DemoDatepickerDateCustomClassesComponent } from './date-custom-classes/date-custom-classes'
 
 
 export const DEMO_COMPONENTS = [
@@ -58,5 +59,6 @@ export const DEMO_COMPONENTS = [
   DemoDatepickerTriggersCustomComponent,
   DemoDatepickerTriggersManualComponent,
   DemoDatepickerValueChangeEventComponent,
-  DemoDatePickerVisibilityEventsComponent
+  DemoDatePickerVisibilityEventsComponent,
+  DemoDatepickerDateCustomClassesComponent
 ];
diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
@@ -676,6 +676,11 @@ export const ngdoc: any = {
         "type": "Date",
         "description": "<p>Initial value of datepicker</p>\n"
       },
+      {
+        "name": "dateCustomClasses",
+        "type": "BsDatepickerDateCustomClasses[]",
+        "description": "<p>Date custom classes</p>\n"
+      },
       {
         "name": "isDisabled",
         "type": "boolean",
@@ -748,6 +753,11 @@ export const ngdoc: any = {
         "type": "string",
         "description": "<p>A selector specifying the element the datepicker should be appended to.\nCurrently only supports &quot;body&quot;.</p>\n"
       },
+      {
+        "name": "dateCustomClasses",
+        "type": "BsDatepickerDateCustomClasses[]",
+        "description": "<p>Date custom classes</p>\n"
+      },
       {
         "name": "daysDisabled",
         "type": "number[]",
@@ -862,6 +872,11 @@ export const ngdoc: any = {
         "type": "string",
         "description": "<p>Add class to current day</p>\n"
       },
+      {
+        "name": "dateCustomClasses",
+        "type": "BsDatepickerDateCustomClasses[]",
+        "description": "<p>Default date custom classes for all date/range pickers</p>\n"
+      },
       {
         "name": "maxDate",
         "type": "Date",
@@ -875,7 +890,7 @@ export const ngdoc: any = {
       {
         "name": "minMode",
         "type": "BsDatepickerViewMode",
-        "description": "<p>Defaut mode for all date pickers</p>\n"
+        "description": "<p>Default mode for all date pickers</p>\n"
       },
       {
         "name": "rangeInputFormat",
@@ -888,6 +903,11 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": "<p>Makes dates from other months active</p>\n"
       },
+      {
+        "name": "selectWeek",
+        "type": "boolean",
+        "description": "<p>Makes dates from other months active</p>\n"
+      },
       {
         "name": "showWeekNumbers",
         "defaultValue": "true",
@@ -929,6 +949,11 @@ export const ngdoc: any = {
         "type": "string",
         "description": "<p>A selector specifying the element the daterangepicker should be appended\nto. Currently only supports &quot;body&quot;.</p>\n"
       },
+      {
+        "name": "dateCustomClasses",
+        "type": "BsDatepickerDateCustomClasses[]",
+        "description": "<p>Date custom classes</p>\n"
+      },
       {
         "name": "isDisabled",
         "type": "boolean",
@@ -1426,6 +1451,13 @@ export const ngdoc: any = {
     "methods": [],
     "properties": []
   },
+  "DatepickerDateCustomClasses": {
+    "fileName": "src/datepicker/models/index.ts",
+    "className": "DatepickerDateCustomClasses",
+    "description": "",
+    "methods": [],
+    "properties": []
+  },
   "BsNavigationEvent": {
     "fileName": "src/datepicker/models/index.ts",
     "className": "BsNavigationEvent",
@@ -1666,6 +1698,10 @@ export const ngdoc: any = {
         "name": "onHover",
         "description": ""
       },
+      {
+        "name": "onHoverWeek",
+        "description": ""
+      },
       {
         "name": "onNavigate",
         "description": ""
@@ -1940,7 +1976,7 @@ export const ngdoc: any = {
     "properties": [
       {
         "name": "dropdownMenu",
-        "type": "Promise<any>",
+        "type": "Promise<BsComponentRef<any>>",
         "description": "<p>Content to be displayed as popover.</p>\n"
       }
     ]
@@ -2953,11 +2989,6 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": "<p>if true hours and minutes fields will be disabled </p>\n"
       },
-      {
-        "name": "disabled",
-        "type": "boolean",
-        "description": "<p>if true hours and minutes fields will be disabled </p>\n"
-      },
       {
         "name": "hourStep",
         "type": "number",
@@ -3046,12 +3077,6 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": "<p>if true hours and minutes fields will be disabled </p>\n"
       },
-      {
-        "name": "disabled",
-        "defaultValue": "false",
-        "type": "boolean",
-        "description": "<p>if true hours and minutes fields will be disabled </p>\n"
-      },
       {
         "name": "hourStep",
         "defaultValue": "1",

diff --git a/src/datepicker/base/bs-datepicker-container.ts b/src/datepicker/base/bs-datepicker-container.ts
@@ -9,6 +9,7 @@ import {
   CalendarCellViewModel,
   CellHoverEvent,
   DatepickerRenderOptions,
+  DatepickerDateCustomClasses,
   DaysCalendarViewModel,
   DayViewModel,
   MonthsCalendarViewModel,
@@ -38,6 +39,10 @@ export abstract class BsDatepickerAbstractComponent {
     this._effects.setDisabled(value);
   }
 
+  set dateCustomClasses(value: DatepickerDateCustomClasses[]) {
+    this._effects.setDateCustomClasses(value);
+  }
+
   viewMode: Observable<BsDatepickerViewMode>;
   daysCalendar: Observable<DaysCalendarViewModel[]>;
   monthsCalendar: Observable<MonthsCalendarViewModel[]>;

diff --git a/src/datepicker/bs-datepicker-inline.component.ts b/src/datepicker/bs-datepicker-inline.component.ts
@@ -6,7 +6,7 @@ import { ComponentLoader, ComponentLoaderFactory } from 'ngx-bootstrap/component
 import { BsDatepickerInlineContainerComponent } from './themes/bs/bs-datepicker-inline-container.component';
 import { Subscription } from 'rxjs';
 import { BsDatepickerInlineConfig } from './bs-datepicker-inline.config';
-import { BsDatepickerConfig } from './bs-datepicker.config';
+import { BsDatepickerConfig, BsDatepickerDateCustomClasses } from './bs-datepicker.config';
 
 @Directive({
   selector: 'bs-datepicker-inline',
@@ -42,6 +42,10 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
    * Maximum date which is available for selection
    */
   @Input() maxDate: Date;
+  /**
+   * Date custom classes
+   */
+  @Input() dateCustomClasses: BsDatepickerDateCustomClasses[];
   /**
    * Emits when datepicker value has been changed
    */
@@ -106,6 +110,10 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
     if (changes.isDisabled) {
       this._datepickerRef.instance.isDisabled = this.isDisabled;
     }
+
+    if (changes.dateCustomClasses) {
+      this._datepickerRef.instance.dateCustomClasses = this.dateCustomClasses;
+    }
   }
 
   /**
@@ -116,7 +124,8 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
       value: this._bsValue,
       isDisabled: this.isDisabled,
       minDate: this.minDate || this.bsConfig && this.bsConfig.minDate,
-      maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate
+      maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate,
+      dateCustomClasses: this.dateCustomClasses || this.bsConfig && this.bsConfig.dateCustomClasses
     });
   }
 

diff --git a/src/datepicker/bs-datepicker.component.ts b/src/datepicker/bs-datepicker.component.ts
@@ -5,7 +5,7 @@ import {
 import { ComponentLoader, ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
 import { BsDatepickerContainerComponent } from './themes/bs/bs-datepicker-container.component';
 import { Subscription } from 'rxjs';
-import { BsDatepickerConfig } from './bs-datepicker.config';
+import { BsDatepickerConfig, BsDatepickerDateCustomClasses } from './bs-datepicker.config';
 import { BsDatepickerViewMode } from './models';
 
 @Directive({
@@ -100,6 +100,10 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
    * Disable Certain days in the week
    */
   @Input() daysDisabled: number[];
+  /**
+   * Date custom classes
+   */
+  @Input() dateCustomClasses: BsDatepickerDateCustomClasses[];
   /**
    * Emits when datepicker value has been changed
    */
@@ -156,6 +160,10 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
     if (changes.isDisabled) {
       this._datepickerRef.instance.isDisabled = this.isDisabled;
     }
+
+    if (changes.dateCustomClasses) {
+      this._datepickerRef.instance.dateCustomClasses = this.dateCustomClasses;
+    }
   }
 
   /**
@@ -227,7 +235,8 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
       minDate: this.minDate || this.bsConfig && this.bsConfig.minDate,
       maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate,
       daysDisabled: this.daysDisabled || this.bsConfig && this.bsConfig.daysDisabled,
-      minMode: this.minMode || this.bsConfig && this.bsConfig.minMode
+      minMode: this.minMode || this.bsConfig && this.bsConfig.minMode,
+      dateCustomClasses: this.dateCustomClasses || this.bsConfig && this.bsConfig.dateCustomClasses
     });
   }
 

diff --git a/src/datepicker/bs-datepicker.config.ts b/src/datepicker/bs-datepicker.config.ts
@@ -1,10 +1,17 @@
 import { Injectable } from '@angular/core';
 import {
   DatepickerRenderOptions,
-  BsDatepickerViewMode
+  BsDatepickerViewMode,
+  DatepickerDateCustomClasses
 } from './models';
 
 
+export class BsDatepickerDateCustomClasses
+  implements DatepickerDateCustomClasses {
+  date: Date;
+  classes: string[];
+}
+
 /**
  * For date range picker there are `BsDaterangepickerConfig` which inherits all properties,
  * except `displayMonths`, for range picker it default to `2`
@@ -21,6 +28,10 @@ export class BsDatepickerConfig implements DatepickerRenderOptions {
    * Default max date for all date/range pickers
    */
   maxDate?: Date;
+  /**
+   * Default date custom classes for all date/range pickers
+   */
+  dateCustomClasses: BsDatepickerDateCustomClasses[];
 
   daysDisabled?: number[];
   /**

diff --git a/src/datepicker/bs-daterangepicker.component.ts b/src/datepicker/bs-daterangepicker.component.ts
@@ -16,7 +16,7 @@ import { BsDaterangepickerConfig } from './bs-daterangepicker.config';
 import { BsDaterangepickerContainerComponent } from './themes/bs/bs-daterangepicker-container.component';
 import { Subscription } from 'rxjs';
 import { ComponentLoaderFactory, ComponentLoader } from 'ngx-bootstrap/component-loader';
-import { BsDatepickerConfig } from './bs-datepicker.config';
+import { BsDatepickerConfig, BsDatepickerDateCustomClasses } from './bs-datepicker.config';
 import { filter } from 'rxjs/operators';
 
 @Directive({
@@ -102,6 +102,10 @@ export class BsDaterangepickerDirective
    * Maximum date which is available for selection
    */
   @Input() maxDate: Date;
+  /**
+   * Date custom classes
+   */
+  @Input() dateCustomClasses: BsDatepickerDateCustomClasses[];
   /**
    * Emits when daterangepicker value has been changed
    */
@@ -153,6 +157,10 @@ export class BsDaterangepickerDirective
     if (changes.isDisabled) {
       this._datepickerRef.instance.isDisabled = this.isDisabled;
     }
+
+    if (changes.dateCustomClasses) {
+      this._datepickerRef.instance.dateCustomClasses = this.dateCustomClasses;
+    }
   }
 
   /**
@@ -205,7 +213,8 @@ export class BsDaterangepickerDirective
         value: this._bsValue,
         isDisabled: this.isDisabled,
         minDate: this.minDate || this.bsConfig && this.bsConfig.minDate,
-        maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate
+        maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate,
+        dateCustomClasses: this.dateCustomClasses || this.bsConfig && this.bsConfig.dateCustomClasses
       }
     );
   }