diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts
index 60cf1c9a91..e544d011d6 100644
--- a/demo/src/app/components/+datepicker/datepicker-section.list.ts
+++ b/demo/src/app/components/+datepicker/datepicker-section.list.ts
@@ -1,4 +1,4 @@
-import { DemoDatePickerPopupComponent } from './demos/bs-popup/date-picker-popup';
+import { DemoDatepickerBasicComponent } from './demos/basic/basic';
 import { DemoDatepickerColorThemingComponent } from './demos/color-theming/color-theming';
 import { DemoDatepickerChangeLocaleComponent } from './demos/change-locale/change-locale';
 import { DemoDatepickerMinMaxComponent } from './demos/min-max/min-max.component';
@@ -36,22 +36,10 @@ export const demoComponentContent: ContentSection[] = [
       {
         title: 'Basic',
         anchor: 'basic',
-        component: require('!!raw-loader?lang=typescript!./demos/bs-popup/date-picker-popup.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/bs-popup/date-picker-popup.html'),
-        description: `
-          <p><code>BsDatepickerModule</code> is activily developed but you can use it already</p>
-          <p>Notable change is additional css for it <code> "/datepicker/bs-datepicker.css"</code> <br></p>
-          <p>There are two ways of adding css:</p>
-          <ul>
-            <li>Load it from CDN. Add <code>&lt;link rel="stylesheet"
-              href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css"&gt;</code> to your
-              <code>index.html</code></li>
-            <li>Load it from <code>node_modules/ngx-bootstrap/datepicker/bs-datepicker.css</code> via package bundler
-              like Angular CLI, if you're using one.
-            </li>
-          </ul>
-        `,
-        outlet: DemoDatePickerPopupComponent
+        component: require('!!raw-loader?lang=typescript!./demos/basic/basic.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
+        description: `If you need to see a datepicker just add <code>bsDatepicker</code> property to the input`,
+        outlet: DemoDatepickerBasicComponent
       },
       {
         title: 'Custom date format',
diff --git a/demo/src/app/components/+datepicker/demos/basic/basic.html b/demo/src/app/components/+datepicker/demos/basic/basic.html
new file mode 100644
index 0000000000..4e9f62207d
--- /dev/null
+++ b/demo/src/app/components/+datepicker/demos/basic/basic.html
@@ -0,0 +1,9 @@
+<div class="row">
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           placeholder="Please choose a date"
+           class="form-control"
+           bsDatepicker>
+  </div>
+</div>
+
diff --git a/demo/src/app/components/+datepicker/demos/basic/basic.ts b/demo/src/app/components/+datepicker/demos/basic/basic.ts
new file mode 100644
index 0000000000..4d6f1369ea
--- /dev/null
+++ b/demo/src/app/components/+datepicker/demos/basic/basic.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-datepicker-basic',
+  templateUrl: './basic.html'
+})
+export class DemoDatepickerBasicComponent {}
diff --git a/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.html b/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.html
deleted file mode 100644
index c238d0f599..0000000000
--- a/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<div class="row">
-  <div class="col-xs-12 col-12 col-md-4 form-group">
-    <input type="text"
-           class="form-control"
-           [minDate]="minDate"
-           [maxDate]="maxDate"
-           #dp="bsDatepicker"
-           bsDatepicker [(bsValue)]="bsValue">
-  </div>
-  <div class="col-xs-12 col-12 col-md-3 form-group">
-    <button class="btn btn-success" (click)="dp.toggle()">Date Picker</button>
-  </div>
-</div>
-<br>
-
-<div class="row">
-  <div class="col-xs-12 col-12 col-md-4 form-group">
-    <input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker [(ngModel)]="bsRangeValue">
-  </div>
-  <div class="col-xs-12 col-12 col-md-3 form-group">
-    <button class="btn btn-success" (click)="drp.toggle()">Date Range Picker</button>
-  </div>
-</div>
-
diff --git a/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.ts b/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.ts
deleted file mode 100644
index 0c69979324..0000000000
--- a/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'demo-date-picker-popup',
-  templateUrl: './date-picker-popup.html'
-})
-export class DemoDatePickerPopupComponent {
-  minDate = new Date(2017, 5, 10);
-  maxDate = new Date(2018, 9, 15);
-
-  bsValue: Date = new Date();
-  bsRangeValue: any = [new Date(2017, 7, 4), new Date(2017, 7, 20)];
-}
diff --git a/demo/src/app/components/+datepicker/demos/index.ts b/demo/src/app/components/+datepicker/demos/index.ts
index 0dc3afaf7f..a3a5569651 100644
--- a/demo/src/app/components/+datepicker/demos/index.ts
+++ b/demo/src/app/components/+datepicker/demos/index.ts
@@ -1,5 +1,5 @@
 import { DatepickerDemoComponent } from './datepicker-demo.component';
-import { DemoDatePickerPopupComponent } from './bs-popup/date-picker-popup';
+import { DemoDatepickerBasicComponent } from './basic/basic';
 import { DemoDatepickerColorThemingComponent } from './color-theming/color-theming';
 import { DemoDatepickerChangeLocaleComponent } from './change-locale/change-locale';
 import { DemoDatepickerMinMaxComponent } from './min-max/min-max.component';
@@ -11,7 +11,7 @@ import { DemoDatepickerPlacementComponent } from './placement/placement';
 
 export const DEMO_COMPONENTS = [
   DatepickerDemoComponent,
-  DemoDatePickerPopupComponent,
+  DemoDatepickerBasicComponent,
   DemoDatePickerCustomFormatComponent,
   DemoDatepickerColorThemingComponent,
   DemoDatepickerChangeLocaleComponent,