feat(daterangepicker): add daysDisabled support for daterangepicker (#…

…5639) * fix(datepicker): add supporting of daysDisabled to daterangepicker * fix(demo): update demo for selectWeekRange functionality
valor-software · Feb 19, 2020 · 690c31e · 690c31e
1 parent a5f1d2d
commit 690c31e
Show file tree

Hide file tree

Showing 21 changed files with 204 additions and 34 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -148,7 +148,7 @@ jobs:
     script:
     - if [[ "$NGV" == "ivy" ]]; then npm run demo.build:ivy; fi
     - if [[ "$NGV" == "latest" ]]; then npm run demo.build:latest; fi
-    - if [[ "$NGV" != "latest"  &&  "$NGV" != "ivy"]]; then npm run demo.build; fi
+    - if [[ "$NGV" != "latest"  &&  "$NGV" != "ivy" ]]; then npm run demo.build; fi
     deploy:
       provider: surge
       project: ./gh-pages/

diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts
@@ -193,7 +193,7 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader!./demos/disable-days/disable-days.html'),
         description: `
           <p>You can set which days of the week should be disabled with <code>daysDisabled</code>
-          <p>In the following example <code>daysDisabled</code> is set with an array which disabled saturday and sunday.
+          <p>In the following example <code>daysDisabled</code> is set with an array which disabled Saturday and Sunday.
           Sunday is considered the first day of the week and thus has the value 0</p>`,
         outlet: DemoDatepickerDaysDisabledComponent
       },

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
@@ -14,3 +14,21 @@
            [datesDisabled]="disabledDates">
   </div>
 </div>
+
+
+<div class="row">
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           placeholder="Datepicker"
+           class="form-control"
+           bsDatepicker
+           [datesEnabled]="enabledDates">
+  </div>
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           placeholder="Daterangepicker"
+           class="form-control"
+           bsDaterangepicker
+           [datesEnabled]="enabledDates">
+  </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
@@ -9,4 +9,11 @@ export class DemoDatepickerDatesDisabledComponent {
     new Date('2019-02-05'),
     new Date('2019-02-09')
   ];
+
+  enabledDates = [
+    new Date('2020-02-06'),
+    new Date('2020-02-07'),
+    new Date('2020-02-08'),
+    new Date('2020-02-09'),
+  ];
 }
diff --git a/demo/src/app/components/+datepicker/demos/disable-days/disable-days.html b/demo/src/app/components/+datepicker/demos/disable-days/disable-days.html
@@ -8,3 +8,15 @@
     <input class="form-control" placeholder="Datepicker" bsDatepicker>
   </div>
 </div>
+
+
+<div class="row">
+  <div class="col-xs-12 col-12 col-sm-6 col-md-5 form-group">
+    <p>Saturday and Sunday are not selectable</p>
+    <input class="form-control" placeholder="Daterangepicker" bsDaterangepicker [daysDisabled]="[6,0]">
+  </div>
+  <div class="col-xs-12 col-12 col-sm-6 col-md-5 form-group">
+    <p>Saturday and Sunday are selectable</p>
+    <input class="form-control" placeholder="Daterangepicker" bsDaterangepicker>
+  </div>
+</div>
diff --git a/demo/src/app/components/+datepicker/demos/select-week-range/select-week-range.html b/demo/src/app/components/+datepicker/demos/select-week-range/select-week-range.html
@@ -26,10 +26,11 @@
 
 <div class="row">
   <div class="col-xs-12 col-12 col-sm-6 col-md-5 form-group">
+    <p>Two first days of the each week are disabled</p>
     <input
       class="form-control"
-      placeholder="First day of each week in January is disabled"
-      bsDaterangepicker [datesDisabled]="disabledFirstWeekDays"
+      placeholder="Two days disabled"
+      bsDaterangepicker [daysDisabled]="[0,1]"
       [bsConfig]="{ selectWeekDateRange: true }">
   </div>
 </div>
@@ -41,8 +42,8 @@
   <div class="col-xs-12 col-12 col-sm-6 col-md-5 form-group">
     <input
       class="form-control"
-      placeholder="All days disabled (1st week of February)"
-      bsDaterangepicker [datesDisabled]="disabledWeekDays"
+      placeholder="All days disabled"
+      bsDaterangepicker [daysDisabled]="[0,1,2,3,4,5,6]"
       [bsConfig]="{ selectWeekDateRange: true }">
   </div>
 </div>
diff --git a/demo/src/app/components/+datepicker/demos/select-week-range/select-week-range.ts b/demo/src/app/components/+datepicker/demos/select-week-range/select-week-range.ts
@@ -4,23 +4,4 @@ import { Component } from '@angular/core';
   selector: 'demo-datepicker-select-week-range',
   templateUrl: './select-week-range.html'
 })
-export class DemoDatePickerSelectWeekRangeComponent {
-  disabledFirstWeekDays =[
-    new Date('2020-01-05'),
-    new Date('2020-01-12'),
-    new Date('2020-01-19'),
-    new Date('2020-01-26'),
-    new Date('2020-01-05'),
-  ];
-
-  disabledWeekDays = [
-    new Date('2020-02-01'),
-    new Date('2020-02-02'),
-    new Date('2020-02-03'),
-    new Date('2020-02-04'),
-    new Date('2020-02-05'),
-    new Date('2020-02-06'),
-    new Date('2020-02-07'),
-    new Date('2020-02-08'),
-  ]
-}
+export class DemoDatePickerSelectWeekRangeComponent {}
diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
@@ -798,6 +798,11 @@ export const ngdoc: any = {
         "type": "Date[]",
         "description": "<p>Disable specific dates</p>\n"
       },
+      {
+        "name": "daysDisabled",
+        "type": "number[]",
+        "description": "<p>Disable certain days in the week</p>\n"
+      },
       {
         "name": "isDisabled",
         "type": "boolean",
@@ -883,7 +888,7 @@ export const ngdoc: any = {
       {
         "name": "daysDisabled",
         "type": "number[]",
-        "description": "<p>Disable Certain days in the week</p>\n"
+        "description": "<p>Disable certain days in the week</p>\n"
       },
       {
         "name": "isDisabled",
@@ -1010,6 +1015,11 @@ export const ngdoc: any = {
         "type": "Date[]",
         "description": "<p>Disable specific dates</p>\n"
       },
+      {
+        "name": "daysDisabled",
+        "type": "number[]",
+        "description": "<p>Disable certain days in the week</p>\n"
+      },
       {
         "name": "isAnimated",
         "defaultValue": "false",
@@ -1104,6 +1114,11 @@ export const ngdoc: any = {
         "type": "Date[]",
         "description": "<p>Disable specific dates</p>\n"
       },
+      {
+        "name": "daysDisabled",
+        "type": "number[]",
+        "description": "<p>Disable certain days in the week</p>\n"
+      },
       {
         "name": "isDisabled",
         "type": "boolean",
@@ -1193,6 +1208,11 @@ export const ngdoc: any = {
         "type": "Date[]",
         "description": "<p>Disable specific dates</p>\n"
       },
+      {
+        "name": "daysDisabled",
+        "type": "number[]",
+        "description": "<p>Disable certain days in the week</p>\n"
+      },
       {
         "name": "isDisabled",
         "type": "boolean",

diff --git a/src/datepicker/base/bs-datepicker-container.ts b/src/datepicker/base/bs-datepicker-container.ts
@@ -38,6 +38,10 @@ export abstract class BsDatepickerAbstractComponent {
     this._effects.setDatesDisabled(value);
   }
 
+  set datesEnabled(value: Date[]) {
+    this._effects.setDatesEnabled(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
@@ -53,6 +53,10 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
   /**
    * Disable specific dates
    */
+  @Input() datesEnabled: Date[];
+  /**
+   * Enable specific dates
+   */
   @Input() datesDisabled: Date[];
   /**
    * Emits when datepicker value has been changed
@@ -124,6 +128,11 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
       this._datepickerRef.instance.value = this._bsValue;
     }
 
+    if (changes.datesEnabled) {
+      this._datepickerRef.instance.datesEnabled = this.datesEnabled;
+      this._datepickerRef.instance.value = this._bsValue;
+    }
+
     if (changes.isDisabled) {
       this._datepickerRef.instance.isDisabled = this.isDisabled;
     }
@@ -143,7 +152,8 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
       minDate: this.minDate || this.bsConfig && this.bsConfig.minDate,
       maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate,
       dateCustomClasses: this.dateCustomClasses || this.bsConfig && this.bsConfig.dateCustomClasses,
-      datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled
+      datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled,
+      datesEnabled: this.datesEnabled || this.bsConfig && this.bsConfig.datesEnabled
     });
 
     if (this._datepickerRef !== undefined) {

diff --git a/src/datepicker/bs-datepicker.component.ts b/src/datepicker/bs-datepicker.component.ts
@@ -104,6 +104,10 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
    * Disable specific dates
    */
   @Input() datesDisabled: Date[];
+  /**
+   * Enable specific dates
+   */
+  @Input() datesEnabled: Date[];
   /**
    * Date custom classes
    */
@@ -165,6 +169,10 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
       this._datepickerRef.instance.datesDisabled = this.datesDisabled;
     }
 
+    if (changes.datesEnabled) {
+      this._datepickerRef.instance.datesEnabled = this.datesEnabled;
+    }
+
     if (changes.isDisabled) {
       this._datepickerRef.instance.isDisabled = this.isDisabled;
     }
@@ -249,6 +257,7 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
       daysDisabled: this.daysDisabled || this.bsConfig && this.bsConfig.daysDisabled,
       dateCustomClasses: this.dateCustomClasses || this.bsConfig && this.bsConfig.dateCustomClasses,
       datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled,
+      datesEnabled: this.datesEnabled || this.bsConfig && this.bsConfig.datesEnabled,
       minMode: this.minMode || this.bsConfig && this.bsConfig.minMode
     });
   }

diff --git a/src/datepicker/bs-datepicker.config.ts b/src/datepicker/bs-datepicker.config.ts
@@ -32,13 +32,18 @@ export class BsDatepickerConfig implements DatepickerRenderOptions {
    * Default date custom classes for all date/range pickers
    */
   dateCustomClasses: DatepickerDateCustomClasses[];
-
+  /**
+   * Disable specific days, e.g. [0,6] will disable all Saturdays and Sundays
+   */
   daysDisabled?: number[];
-
   /**
    * Disable specific dates
    */
   datesDisabled?: Date[];
+  /**
+   * Enable specific dates
+   */
+  datesEnabled?: Date[];
   /**
    * Makes dates from other months active
    */

diff --git a/src/datepicker/bs-daterangepicker-inline.component.ts b/src/datepicker/bs-daterangepicker-inline.component.ts
@@ -51,10 +51,18 @@ export class BsDaterangepickerInlineDirective implements OnInit, OnDestroy, OnCh
      * Date custom classes
      */
     @Input() dateCustomClasses: DatepickerDateCustomClasses[];
+    /**
+     * Disable specific days, e.g. [0,6] will disable all Saturdays and Sundays
+     */
+    @Input() daysDisabled?: number[];
     /**
      * Disable specific dates
      */
     @Input() datesDisabled: Date[];
+    /**
+    * Disable specific dates
+    */
+    @Input() datesEnabled: Date[];
     /**
      * Emits when daterangepicker value has been changed
      */
@@ -122,10 +130,18 @@ export class BsDaterangepickerInlineDirective implements OnInit, OnDestroy, OnCh
           this._datepickerRef.instance.maxDate = this.maxDate;
         }
 
+        if (changes.datesEnabled) {
+          this._datepickerRef.instance.datesEnabled = this.datesEnabled;
+        }
+
         if (changes.datesDisabled) {
           this._datepickerRef.instance.datesDisabled = this.datesDisabled;
         }
 
+        if (changes.daysDisabled) {
+          this._datepickerRef.instance.daysDisabled = this.daysDisabled;
+        }
+
         if (changes.isDisabled) {
           this._datepickerRef.instance.isDisabled = this.isDisabled;
         }
@@ -144,8 +160,10 @@ export class BsDaterangepickerInlineDirective implements OnInit, OnDestroy, OnCh
         isDisabled: this.isDisabled,
         minDate: this.minDate || this.bsConfig && this.bsConfig.minDate,
         maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate,
+        daysDisabled: this.daysDisabled || this.bsConfig && this.bsConfig.daysDisabled,
         dateCustomClasses: this.dateCustomClasses || this.bsConfig && this.bsConfig.dateCustomClasses,
-        datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled
+        datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled,
+        datesEnabled: this.datesEnabled || this.bsConfig && this.bsConfig.datesEnabled
       });
     }
 

diff --git a/src/datepicker/bs-daterangepicker.component.ts b/src/datepicker/bs-daterangepicker.component.ts
@@ -106,10 +106,18 @@ export class BsDaterangepickerDirective
    * Date custom classes
    */
   @Input() dateCustomClasses: DatepickerDateCustomClasses[];
+  /**
+   * Disable specific days, e.g. [0,6] will disable all Saturdays and Sundays
+   */
+  @Input() daysDisabled?: number[];
   /**
    * Disable specific dates
    */
   @Input() datesDisabled: Date[];
+  /**
+   * Enable specific dates
+   */
+  @Input() datesEnabled: Date[];
   /**
    * Emits when daterangepicker value has been changed
    */
@@ -162,6 +170,14 @@ export class BsDaterangepickerDirective
       this._datepickerRef.instance.datesDisabled = this.datesDisabled;
     }
 
+    if (changes.daysDisabled) {
+      this._datepickerRef.instance.daysDisabled = this.daysDisabled;
+    }
+
+    if (changes.datesEnabled) {
+      this._datepickerRef.instance.datesEnabled = this.datesEnabled;
+    }
+
     if (changes.isDisabled) {
       this._datepickerRef.instance.isDisabled = this.isDisabled;
     }
@@ -222,8 +238,10 @@ export class BsDaterangepickerDirective
         isDisabled: this.isDisabled,
         minDate: this.minDate || this.bsConfig && this.bsConfig.minDate,
         maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate,
+        daysDisabled: this.daysDisabled || this.bsConfig && this.bsConfig.daysDisabled,
         dateCustomClasses: this.dateCustomClasses || this.bsConfig && this.bsConfig.dateCustomClasses,
-        datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled
+        datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled,
+        datesEnabled: this.datesEnabled || this.bsConfig && this.bsConfig.datesEnabled
       }
     );
   }

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