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

Author: frederikprijck

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',

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>

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')
+  ];
+}

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,

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",

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';

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);

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
     });
   }
 

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
     });
   }

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
    */