feat(datepicker): Allow to disable specific dates (#5046)

* feat(datepicker): Allow to disable specific dates * feat(datepicker): Move isDisabledDate outside of chronos * feat(datepicker): Add datesDisabled to inline datepicker * feat(datepicker): Add datesDisabled to daterangepicker * feat(datepicker): Update demo for datesDisabled * feat(datepicker): Add test for flag days calendar * feat(datepicker): update docs for datesDisabled * feat(datepicker): Fix typo * feat(datepicker): Add demo for datesDisabled with daterangepicker
valor-software · Feb 8, 2019 · 5633d2d · 5633d2d
1 parent af59314
commit 5633d2d
Show file tree

Hide file tree

Showing 18 changed files with 183 additions and 19 deletions.
diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts
@@ -10,6 +10,7 @@ import { DemoDatePickerConfigObjectComponent } from './demos/config-object/confi
 import { DemoDatePickerCustomFormatComponent } from './demos/custom-format/custom-format';
 import { DemoDatepickerDateInitialStateComponent } from './demos/date-initial-state/date-initial-state';
 import { DemoDatepickerDaysDisabledComponent } from './demos/disable-days/disable-days';
+import { DemoDatepickerDatesDisabledComponent } from './demos/disable-dates/disable-dates';
 import { DemoDatepickerInlineComponent } from './demos/inline-datepicker/inline-datepicker.component';
 import { DemoDatepickerDisabledComponent } from './demos/disabled/disabled.component';
 import { DemoDatepickerFormsComponent } from './demos/forms/forms.component';
@@ -173,6 +174,16 @@ export const demoComponentContent: ContentSection[] = [
           Sunday is considered the first day of the week and thus has the value 0</p>`,
         outlet: DemoDatepickerDaysDisabledComponent
       },
+      {
+        title: 'Dates disabled',
+        anchor: 'dates-disabled',
+        component: require('!!raw-loader?lang=typescript!./demos/disable-dates/disable-dates.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/disable-dates/disable-dates.html'),
+        description: `
+          <p>You can set which dates should be disabled with <code>datesDisabled</code></p>
+          <p>In the following example <code>datesDisabled</code> is set with an array to disable 2019-02-05 and 2019-02-09.</p>`,
+        outlet: DemoDatepickerDatesDisabledComponent
+      },
       {
         title: 'Min-mode',
         anchor: 'min-mode',

diff --git a/demo/src/app/components/+datepicker/demos/disable-dates/disable-dates.html b/demo/src/app/components/+datepicker/demos/disable-dates/disable-dates.html
@@ -0,0 +1,16 @@
+<div class="row">
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           placeholder="Datepicker"
+           class="form-control"
+           bsDatepicker
+           [datesDisabled]="disabledDates">
+  </div>
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           placeholder="Daterangepicker"
+           class="form-control"
+           bsDaterangepicker
+           [datesDisabled]="disabledDates">
+  </div>
+</div>
diff --git a/demo/src/app/components/+datepicker/demos/disable-dates/disable-dates.ts b/demo/src/app/components/+datepicker/demos/disable-dates/disable-dates.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-datepicker-datesdisabled',
+  templateUrl: './disable-dates.html'
+})
+export class DemoDatepickerDatesDisabledComponent {
+  disabledDates = [
+    new Date('2019-02-05'),
+    new Date('2019-02-09')
+  ];
+}
diff --git a/demo/src/app/components/+datepicker/demos/index.ts b/demo/src/app/components/+datepicker/demos/index.ts
@@ -9,6 +9,7 @@ import { DemoDatePickerCustomFormatComponent } from './custom-format/custom-form
 import { DemoDatepickerCustomTodayClassComponent } from './custom-today-class/custom-today-class.component';
 import { DemoDatepickerDateInitialStateComponent } from './date-initial-state/date-initial-state';
 import { DemoDatepickerDaysDisabledComponent } from './disable-days/disable-days';
+import { DemoDatepickerDatesDisabledComponent } from './disable-dates/disable-dates';
 import { DemoDatepickerDisabledComponent } from './disabled/disabled.component';
 import { DemoDatepickerFormsComponent } from './forms/forms.component';
 import { DemoDatepickerHideOnScrollComponent } from './hide-on-scroll/hide-on-scroll';
@@ -41,6 +42,7 @@ export const DEMO_COMPONENTS = [
   DemoDatePickerCustomFormatComponent,
   DemoDatepickerCustomTodayClassComponent,
   DemoDatepickerDateInitialStateComponent,
+  DemoDatepickerDatesDisabledComponent,
   DemoDatepickerDaysDisabledComponent,
   DemoDatepickerDisabledComponent,
   DemoDatepickerFormsComponent,

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": "datesDisabled",
+        "type": "Date[]",
+        "description": "<p>Disable specific dates</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": "datesDisabled",
+        "type": "Date[]",
+        "description": "<p>Disable specific dates</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": "datesDisabled",
+        "type": "Date[]",
+        "description": "<p>Disable specific dates</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": "datesDisabled",
+        "type": "Date[]",
+        "description": "<p>Disable specific dates</p>\n"
+      },
       {
         "name": "isDisabled",
         "type": "boolean",
@@ -1666,6 +1691,10 @@ export const ngdoc: any = {
         "name": "onHover",
         "description": ""
       },
+      {
+        "name": "onHoverWeek",
+        "description": ""
+      },
       {
         "name": "onNavigate",
         "description": ""
@@ -1940,7 +1969,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 +2982,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 +3070,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/chronos/public_api.ts b/src/chronos/public_api.ts
@@ -27,7 +27,7 @@ export {
 
 export { LocaleData } from './locale/locale.class';
 
-export { isAfter, isBefore, isDisabledDay } from './utils/date-compare';
+export { isAfter, isBefore, isDisabledDay, isSame } from './utils/date-compare';
 export { isArray, isDateValid, isDate } from './utils/type-checks';
 export { shiftDate, setFullDate } from './utils/date-setters';
 export { endOf, startOf } from './utils/start-end-of';

diff --git a/src/datepicker/base/bs-datepicker-container.ts b/src/datepicker/base/bs-datepicker-container.ts
@@ -33,6 +33,9 @@ export abstract class BsDatepickerAbstractComponent {
   set daysDisabled(value: number[]) {
     this._effects.setDaysDisabled(value);
   }
+  set datesDisabled(value: Date[]) {
+    this._effects.setDatesDisabled(value);
+  }
 
   set isDisabled(value: boolean) {
     this._effects.setDisabled(value);

diff --git a/src/datepicker/bs-datepicker-inline.component.ts b/src/datepicker/bs-datepicker-inline.component.ts
@@ -42,6 +42,10 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
    * Maximum date which is available for selection
    */
   @Input() maxDate: Date;
+  /**
+   * Disable specific dates
+   */
+  @Input() datesDisabled: Date[];
   /**
    * Emits when datepicker value has been changed
    */
@@ -103,6 +107,10 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
       this._datepickerRef.instance.maxDate = this.maxDate;
     }
 
+    if (changes.datesDisabled) {
+      this._datepickerRef.instance.datesDisabled = this.datesDisabled;
+    }
+
     if (changes.isDisabled) {
       this._datepickerRef.instance.isDisabled = this.isDisabled;
     }
@@ -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,
+      datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled
     });
   }
 

diff --git a/src/datepicker/bs-datepicker.component.ts b/src/datepicker/bs-datepicker.component.ts
@@ -100,6 +100,11 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
    * Disable Certain days in the week
    */
   @Input() daysDisabled: number[];
+
+  /**
+   * Disable specific dates
+   */
+  @Input() datesDisabled: Date[];
   /**
    * Emits when datepicker value has been changed
    */
@@ -153,6 +158,10 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
       this._datepickerRef.instance.daysDisabled = this.daysDisabled;
     }
 
+    if (changes.datesDisabled) {
+      this._datepickerRef.instance.datesDisabled = this.datesDisabled;
+    }
+
     if (changes.isDisabled) {
       this._datepickerRef.instance.isDisabled = this.isDisabled;
     }
@@ -227,6 +236,7 @@ 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,
+      datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled,
       minMode: this.minMode || this.bsConfig && this.bsConfig.minMode
     });
   }

diff --git a/src/datepicker/bs-datepicker.config.ts b/src/datepicker/bs-datepicker.config.ts
@@ -23,6 +23,11 @@ export class BsDatepickerConfig implements DatepickerRenderOptions {
   maxDate?: Date;
 
   daysDisabled?: number[];
+
+  /**
+   * Disable specific dates
+   */
+  datesDisabled?: Date[];
   /**
    * Makes dates from other months active
    */

diff --git a/src/datepicker/bs-daterangepicker.component.ts b/src/datepicker/bs-daterangepicker.component.ts
@@ -102,6 +102,10 @@ export class BsDaterangepickerDirective
    * Maximum date which is available for selection
    */
   @Input() maxDate: Date;
+  /**
+   * Disable specific dates
+   */
+  @Input() datesDisabled: Date[];
   /**
    * Emits when daterangepicker value has been changed
    */
@@ -150,6 +154,10 @@ export class BsDaterangepickerDirective
       this._datepickerRef.instance.maxDate = this.maxDate;
     }
 
+    if (changes.datesDisabled) {
+      this._datepickerRef.instance.datesDisabled = this.datesDisabled;
+    }
+
     if (changes.isDisabled) {
       this._datepickerRef.instance.isDisabled = this.isDisabled;
     }
@@ -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,
+        datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled
       }
     );
   }

diff --git a/src/datepicker/engine/flag-days-calendar.ts b/src/datepicker/engine/flag-days-calendar.ts
@@ -13,13 +13,14 @@ import {
   shiftDate
 } from 'ngx-bootstrap/chronos';
 
-import { isMonthDisabled } from '../utils/bs-calendar-utils';
+import { isMonthDisabled, isDisabledDate } from '../utils/bs-calendar-utils';
 
 export interface FlagDaysCalendarOptions {
   isDisabled: boolean;
   minDate: Date;
   maxDate: Date;
   daysDisabled: number[];
+  datesDisabled: Date[];
   hoveredDate: Date;
   selectedDate: Date;
   selectedRange: Date[];
@@ -63,7 +64,8 @@ export function flagDaysCalendar(
         options.isDisabled ||
         isBefore(day.date, options.minDate, 'day') ||
         isAfter(day.date, options.maxDate, 'day') ||
-        isDisabledDay(day.date, options.daysDisabled);
+        isDisabledDay(day.date, options.daysDisabled) ||
+        isDisabledDate(day.date, options.datesDisabled);
 
       const currentDate = new Date();
       const isToday = !isOtherMonth && isSameDay(day.date, currentDate);

diff --git a/src/datepicker/engine/flag-days.calendar.spec.ts b/src/datepicker/engine/flag-days.calendar.spec.ts
@@ -0,0 +1,42 @@
+import { flagDaysCalendar } from './flag-days-calendar';
+
+describe('flag-days-calendar:', () => {
+
+    it('should flag days as disabled when they are part of the datesDisabled', () => {
+      const weekViewModel = {
+        month: new Date('2019-02-01'),
+        weeks: [
+          {
+            days: [
+              { date: new Date('2019-02-07'), label: '2019-02-07' },
+              { date: new Date('2019-02-08'), label: '2019-02-08'  },
+              { date: new Date('2019-02-09'), label: '2019-02-09'  }
+            ]}
+        ],
+        weekNumbers: [],
+        weekdays: [],
+        monthTitle: '',
+        yearTitle: ''
+      };
+      const datesDisabled = [
+        new Date('2019-02-07'),
+        new Date('2019-02-09')
+      ];
+      const result = flagDaysCalendar(weekViewModel, {
+        datesDisabled,
+        isDisabled: false,
+        minDate: new Date('2019-01-01'),
+        maxDate: new Date('2019-12-31'),
+        daysDisabled: [],
+        hoveredDate: new Date('2019-02-06'),
+        selectedDate: new Date('2019-02-05'),
+        selectedRange: [],
+        displayMonths: 1,
+        monthIndex: 1
+      });
+
+      expect(result.weeks[0].days.find(day => day.label === '2019-02-07').isDisabled).toBe(true);
+      expect(result.weeks[0].days.find(day => day.label === '2019-02-08').isDisabled).toBe(false);
+      expect(result.weeks[0].days.find(day => day.label === '2019-02-09').isDisabled).toBe(true);
+    });
+   });