diff --git a/demo/src/app/components/+alerts/alerts-section.list.ts b/demo/src/app/components/+alerts/alerts-section.list.ts
index 431e6b032d..38e0ca80d6 100644
--- a/demo/src/app/components/+alerts/alerts-section.list.ts
+++ b/demo/src/app/components/+alerts/alerts-section.list.ts
@@ -39,8 +39,7 @@ export const demoComponentContent: ContentSection[] = [
         description: `<p>Alerts are available for any length of text, as well as an optional dismiss
           button. For proper styling, use one of the four <strong>required</strong>
           contextual classes (e.g., <code>.alert-success</code>). For inline
-          dismissal, use the <a routerLink="." fragment="dismissing"><code>dismiss
-          property</code></a>.</p>`,
+          dismissal, use the <code>dismissible</code> property.</p>`,
         component: require('!!raw-loader?lang=typescript!./demos/basic/basic'),
         html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
         outlet: DemoAlertBasicComponent
diff --git a/demo/src/app/components/+collapse/collapse-section.list.ts b/demo/src/app/components/+collapse/collapse-section.list.ts
index 87d73a3ccf..bbd39daa3a 100644
--- a/demo/src/app/components/+collapse/collapse-section.list.ts
+++ b/demo/src/app/components/+collapse/collapse-section.list.ts
@@ -1,5 +1,6 @@
 import { CollapseDemoComponent } from './demos/basic/basic';
 import { ToggleManualDemoComponent } from './demos/toggle-manual/toggle-manual';
+import { CollapseDemoEventsComponent } from './demos/events/events';
 
 import { ContentSection } from '../../docs/models/content-section.model';
 import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
@@ -30,6 +31,15 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
         outlet: CollapseDemoComponent
       },
+      {
+        title: 'Events',
+        anchor: 'events',
+        component: require('!!raw-loader?lang=typescript!./demos/events/events'),
+        html: require('!!raw-loader?lang=markup!./demos/events/events.html'),
+        description: `Collapse directive exposes 2 events: <code>collapsed</code>, that fires when a content was hidden, 
+                      and <code>expanded</code>, that fires when a content was shown`,
+        outlet: CollapseDemoEventsComponent
+      },
       {
         title: 'Manual toggle',
         anchor: 'manual-toggle',
diff --git a/demo/src/app/components/+collapse/demos/basic/basic.html b/demo/src/app/components/+collapse/demos/basic/basic.html
index fc68006f1a..924540b4c3 100644
--- a/demo/src/app/components/+collapse/demos/basic/basic.html
+++ b/demo/src/app/components/+collapse/demos/basic/basic.html
@@ -2,9 +2,6 @@
         (click)="isCollapsed = !isCollapsed">Toggle collapse
 </button>
 <hr>
-<div (collapsed)="collapsed($event)"
-     (expanded)="expanded($event)"
-     [collapse]="isCollapsed"
-     class="card card-block card-header">
+<div [collapse]="isCollapsed" class="card card-block card-header">
   <div class="well well-lg">Some content</div>
 </div>
diff --git a/demo/src/app/components/+collapse/demos/basic/basic.ts b/demo/src/app/components/+collapse/demos/basic/basic.ts
index 1ba3b8b3b2..8e3c87e2b2 100644
--- a/demo/src/app/components/+collapse/demos/basic/basic.ts
+++ b/demo/src/app/components/+collapse/demos/basic/basic.ts
@@ -5,13 +5,5 @@ import { Component } from '@angular/core';
   templateUrl: './basic.html'
 })
 export class CollapseDemoComponent {
-  isCollapsed: boolean = false;
-
-  collapsed(event: any): void {
-    console.log(event);
-  }
-
-  expanded(event: any): void {
-    console.log(event);
-  }
+  isCollapsed = false;
 }
diff --git a/demo/src/app/components/+collapse/demos/events/events.html b/demo/src/app/components/+collapse/demos/events/events.html
new file mode 100644
index 0000000000..e639612bed
--- /dev/null
+++ b/demo/src/app/components/+collapse/demos/events/events.html
@@ -0,0 +1,17 @@
+<div class="row">
+  <div class="col-md-3">
+    <button type="button" class="btn btn-primary"
+            (click)="isCollapsed = !isCollapsed">Toggle collapse
+    </button>
+  </div>
+  <div class="col-md-9">
+    <pre class="card card-block card-header">Event: {{message}}</pre>
+  </div>
+</div>
+<hr>
+<div (collapsed)="collapsed()"
+     (expanded)="expanded()"
+     [collapse]="isCollapsed"
+     class="card card-block card-header">
+  <div class="well well-lg">Some content</div>
+</div>
diff --git a/demo/src/app/components/+collapse/demos/events/events.ts b/demo/src/app/components/+collapse/demos/events/events.ts
new file mode 100644
index 0000000000..759d80125e
--- /dev/null
+++ b/demo/src/app/components/+collapse/demos/events/events.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'collapse-demo-events',
+  templateUrl: './events.html'
+})
+export class CollapseDemoEventsComponent {
+  isCollapsed = false;
+  message: string;
+
+  collapsed(): void {
+    this.message = 'collapsed';
+  }
+
+  expanded(): void {
+    this.message = 'expanded';
+  }
+}
diff --git a/demo/src/app/components/+collapse/demos/index.ts b/demo/src/app/components/+collapse/demos/index.ts
index 537e939678..f62c5b51a6 100644
--- a/demo/src/app/components/+collapse/demos/index.ts
+++ b/demo/src/app/components/+collapse/demos/index.ts
@@ -1,9 +1,11 @@
 import { CollapseDemoComponent } from './basic/basic';
 import { ToggleManualDemoComponent } from './toggle-manual/toggle-manual';
+import { CollapseDemoEventsComponent } from './events/events';
 import { DemoAccessibilityComponent } from './accessibility/accessibility';
 
 export const DEMO_COMPONENTS = [
   CollapseDemoComponent,
+  CollapseDemoEventsComponent,
   ToggleManualDemoComponent,
   DemoAccessibilityComponent
 ];
diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts
index 2668a85554..f4bb825300 100644
--- a/demo/src/app/components/+datepicker/datepicker-section.list.ts
+++ b/demo/src/app/components/+datepicker/datepicker-section.list.ts
@@ -147,11 +147,11 @@ export const demoComponentContent: ContentSection[] = [
         outlet: DemoDatepickerMinMaxComponent
       },
       {
-        title: 'Disabled (scratch, WIP)',
+        title: 'Disabled',
         anchor: 'disabled-datepicker',
         component: require('!!raw-loader?lang=typescript!./demos/disabled/disabled.component.ts'),
         html: require('!!raw-loader?lang=markup!./demos/disabled/disabled.component.html'),
-        description: `<p>If you want to disable datepicker set <code>isDisabled</code> property to true</p>`,
+        description: `<p>If you want to disable datepicker's or daterangepicker's content set <code>isDisabled</code> property to true</p>`,
         outlet: DemoDatepickerDisabledComponent
       },
       {
diff --git a/demo/src/app/components/+datepicker/demos/date-initial-state/date-initial-state.html b/demo/src/app/components/+datepicker/demos/date-initial-state/date-initial-state.html
index e34993e8a5..eb006e2589 100644
--- a/demo/src/app/components/+datepicker/demos/date-initial-state/date-initial-state.html
+++ b/demo/src/app/components/+datepicker/demos/date-initial-state/date-initial-state.html
@@ -1,4 +1,4 @@
-<p>bsValue property sets initial state in this example</p>
+<p><code>bsValue</code> property sets initial state in this example</p>
 <div class="row">
   <div class="col-xs-12 col-12 col-md-4 form-group">
     <input type="text"
@@ -12,7 +12,7 @@
   </div>
 </div>
 
-<p>ngModel property sets two-way data binding in this example</p>
+<p><code>ngModel</code> property sets two-way data binding in this example</p>
 <div class="row">
   <div class="col-xs-12 col-12 col-md-4 form-group">
     <input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker [(ngModel)]="bsRangeValue">
diff --git a/demo/src/app/components/+datepicker/demos/disabled/disabled.component.html b/demo/src/app/components/+datepicker/demos/disabled/disabled.component.html
index 16c9405d94..cabd39b359 100644
--- a/demo/src/app/components/+datepicker/demos/disabled/disabled.component.html
+++ b/demo/src/app/components/+datepicker/demos/disabled/disabled.component.html
@@ -1,9 +1,13 @@
 <div class="row">
   <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
-    <input class="form-control" placeholder="Datepicker" bsDatepicker #dp="bsDatepicker">
+    <input class="form-control" placeholder="Datepicker" bsDatepicker #dp="bsDatepicker"
+           [isDisabled]="isDisabled">
   </div>
   <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
-    <input class="form-control" placeholder="Daterangepicker" bsDaterangepicker #dpr="bsDaterangepicker">
+    <input class="form-control" placeholder="Daterangepicker" bsDaterangepicker #dpr="bsDaterangepicker"
+           [isDisabled]="isDisabled">
+  </div>
+  <div class="col-xs-12 col-12 col-sm-4 col-md-12 col-lg-4 form-group">
+    <button class="btn btn-success" (click)="toggleDisabling()">Toggle disabling</button>
   </div>
 </div>
-
diff --git a/demo/src/app/components/+datepicker/demos/disabled/disabled.component.ts b/demo/src/app/components/+datepicker/demos/disabled/disabled.component.ts
index 8e0a49cff5..b5e164a2c0 100644
--- a/demo/src/app/components/+datepicker/demos/disabled/disabled.component.ts
+++ b/demo/src/app/components/+datepicker/demos/disabled/disabled.component.ts
@@ -6,4 +6,8 @@ import { Component } from '@angular/core';
 })
 export class DemoDatepickerDisabledComponent {
   isDisabled = false;
+
+  toggleDisabling(): void {
+    this.isDisabled = !this.isDisabled;
+  }
 }
diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
index 04cc88abfd..70a6e7fa31 100644
--- a/demo/src/ng-api-doc.ts
+++ b/demo/src/ng-api-doc.ts
@@ -695,7 +695,7 @@ export const ngdoc: any = {
       {
         "name": "isDisabled",
         "type": "boolean",
-        "description": "<p>Indicates whether datepicker is enabled or not</p>\n"
+        "description": "<p>Indicates whether datepicker&#39;s content is enabled or not</p>\n"
       },
       {
         "name": "isOpen",
@@ -845,7 +845,7 @@ export const ngdoc: any = {
       {
         "name": "isDisabled",
         "type": "boolean",
-        "description": "<p>Indicates whether daterangepicker is enabled or not</p>\n"
+        "description": "<p>Indicates whether daterangepicker&#39;s content is enabled or not</p>\n"
       },
       {
         "name": "isOpen",
diff --git a/src/datepicker/bs-datepicker.component.ts b/src/datepicker/bs-datepicker.component.ts
index 0b96ff77c1..b4ccb1a88f 100644
--- a/src/datepicker/bs-datepicker.component.ts
+++ b/src/datepicker/bs-datepicker.component.ts
@@ -77,7 +77,7 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
    */
   @Input() bsConfig: Partial<BsDatepickerConfig>;
   /**
-   * Indicates whether datepicker is enabled or not
+   * Indicates whether datepicker's content is enabled or not
    */
   @Input() isDisabled: boolean;
   /**
diff --git a/src/datepicker/bs-daterangepicker.component.ts b/src/datepicker/bs-daterangepicker.component.ts
index b2d3a72685..7c744d7f25 100644
--- a/src/datepicker/bs-daterangepicker.component.ts
+++ b/src/datepicker/bs-daterangepicker.component.ts
@@ -77,7 +77,7 @@ export class BsDaterangepickerDirective
    */
   @Input() bsConfig: Partial<BsDaterangepickerConfig>;
   /**
-   * Indicates whether daterangepicker is enabled or not
+   * Indicates whether daterangepicker's content is enabled or not
    */
   @Input() isDisabled: boolean;
   /**
diff --git a/src/datepicker/monthpicker.component.ts b/src/datepicker/monthpicker.component.ts
index bb10e8365e..486a17baf1 100644
--- a/src/datepicker/monthpicker.component.ts
+++ b/src/datepicker/monthpicker.component.ts
@@ -31,7 +31,7 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
   </thead>
   <tbody>
     <tr *ngFor="let rowz of rows">
-      <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" id="{{dtz.uid}}" [ngClass]="dtz.customClass">
+      <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [attr.id]="dtz.uid" [ngClass]="dtz.customClass">
         <button type="button" style="min-width:100%;" class="btn btn-default"
                 [ngClass]="{'btn-link': isBs4 && !dtz.selected && !datePicker.isActive(dtz), 'btn-info': dtz.selected || (isBs4 && !dtz.selected && datePicker.isActive(dtz)), disabled: dtz.disabled, active: !isBs4 && datePicker.isActive(dtz)}"
                 [disabled]="dtz.disabled"
diff --git a/src/datepicker/yearpicker.component.ts b/src/datepicker/yearpicker.component.ts
index fd88ba29d7..2348898072 100644
--- a/src/datepicker/yearpicker.component.ts
+++ b/src/datepicker/yearpicker.component.ts
@@ -32,7 +32,7 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
   </thead>
   <tbody>
     <tr *ngFor="let rowz of rows">
-      <td *ngFor="let dtz of rowz" class="text-center" role="gridcell">
+      <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [attr.id]="dtz.uid">
         <button type="button" style="min-width:100%;" class="btn btn-default"
                 [ngClass]="{'btn-link': isBs4 && !dtz.selected && !datePicker.isActive(dtz), 'btn-info': dtz.selected || (isBs4 && !dtz.selected && datePicker.isActive(dtz)), disabled: dtz.disabled, active: !isBs4 && datePicker.isActive(dtz)}"
                 [disabled]="dtz.disabled"