From b845340870937c7a25f84465d7ce8d402da5b4b2 Mon Sep 17 00:00:00 2001
From: Muhammad Ahsan Ayaz <ahsan.ubitian@gmail.com>
Date: Fri, 21 Jun 2019 16:26:53 +0500
Subject: [PATCH] feat(doc): include docs for DateRangepicker custom format
 (#5199)

---
 .../datepicker/custom_date_format_spec.ts     |  6 ++--
 .../demos/custom-format/custom-format.html    | 34 +++++++++++++------
 .../demos/custom-format/custom-format.ts      |  9 ++---
 3 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/cypress/full/datepicker/custom_date_format_spec.ts b/cypress/full/datepicker/custom_date_format_spec.ts
index 50a37e2ba2..1c654cc46d 100644
--- a/cypress/full/datepicker/custom_date_format_spec.ts
+++ b/cypress/full/datepicker/custom_date_format_spec.ts
@@ -18,9 +18,9 @@ describe('Datepicker demo test suite: Custom date format', () => {
                      "YYYY-MM-DD", "MM/DD/YYYY", "MMMM Do YYYY,h:mm:ss a"`, () => {
     const dayToChose = currentDay < 10 ? `0${currentDay}` : currentDay;
     const monthToChose = currentMonthNum + 1 < 10 ? `0${currentMonthNum + 1}` : currentMonthNum + 1;
-    datepicker.isInputHaveAttrs(customFormat, [{ attr: 'formcontrolname', value: 'myDateYMD' }], 0);
-    datepicker.isInputHaveAttrs(customFormat, [{ attr: 'formcontrolname', value: 'myDateMDY' }], 1);
-    datepicker.isInputHaveAttrs(customFormat, [{ attr: 'formcontrolname', value: 'myDateFull' }], 2);
+    datepicker.isInputHaveAttrs(customFormat, [{ attr: 'formcontrolname', value: 'dateYMD' }], 0);
+    datepicker.isInputHaveAttrs(customFormat, [{ attr: 'formcontrolname', value: 'dateMDY' }], 1);
+    datepicker.isInputHaveAttrs(customFormat, [{ attr: 'formcontrolname', value: 'dateFull' }], 2);
     datepicker.isButtonExist(customFormat, 'Date Picker', 0);
     datepicker.isButtonExist(customFormat, 'Date Picker', 1);
     datepicker.isButtonExist(customFormat, 'Date Picker', 2);
diff --git a/demo/src/app/components/+datepicker/demos/custom-format/custom-format.html b/demo/src/app/components/+datepicker/demos/custom-format/custom-format.html
index 2049bc6b6a..daed39d35f 100644
--- a/demo/src/app/components/+datepicker/demos/custom-format/custom-format.html
+++ b/demo/src/app/components/+datepicker/demos/custom-format/custom-format.html
@@ -1,15 +1,15 @@
-<form [formGroup]="myForm">
+<form [formGroup]="form">
   <div class="row">
     <div class="col-xs-12 col-md-5 col-lg-4 form-group">
       <input
         class="form-control"
-        #dpYMD="bsDatepicker"
+        #datepickerYMD="bsDatepicker"
         bsDatepicker
-        formControlName="myDateYMD"
+        formControlName="dateYMD"
         [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }">
     </div>
     <div class="col-xs-12 col-12 col-md-3 form-group">
-      <button class="btn btn-success" (click)="dpYMD.toggle()" [attr.aria-expanded]="dpYMD.isOpen">Date Picker</button>
+      <button class="btn btn-success" (click)="datepickerYMD.toggle()" [attr.aria-expanded]="datepickerYMD.isOpen">Date Picker</button>
     </div>
   </div>
   <br>
@@ -18,13 +18,13 @@
     <div class="col-xs-12 col-md-5 col-lg-4 form-group">
       <input
         class="form-control"
-        #dpMDY="bsDatepicker"
+        #datepickerMDY="bsDatepicker"
         bsDatepicker
-        formControlName="myDateMDY"
+        formControlName="dateMDY"
         [bsConfig]="{ dateInputFormat: 'MM/DD/YYYY' }">
     </div>
     <div class="col-xs-12 col-12 col-md-3 form-group">
-      <button class="btn btn-success" (click)="dpMDY.toggle()" [attr.aria-expanded]="dpMDY.isOpen">Date Picker</button>
+      <button class="btn btn-success" (click)="datepickerMDY.toggle()" [attr.aria-expanded]="datepickerMDY.isOpen">Date Picker</button>
     </div>
   </div>
   <br>
@@ -33,13 +33,27 @@
     <div class="col-xs-12 col-md-5 col-lg-4 form-group">
       <input
         class="form-control"
-        #dpFull="bsDatepicker"
+        #datepickerFull="bsDatepicker"
         bsDatepicker
-        formControlName="myDateFull"
+        formControlName="dateFull"
         [bsConfig]="{ dateInputFormat: 'MMMM Do YYYY, h:mm:ss a' }">
     </div>
     <div class="col-xs-12 col-12 col-md-3 form-group">
-      <button class="btn btn-success" (click)="dpFull.toggle()" [attr.aria-expanded]="dpFull.isOpen">Date Picker</button>
+      <button class="btn btn-success" (click)="datepickerFull.toggle()" [attr.aria-expanded]="datepickerFull.isOpen">Date Picker</button>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-xs-12 col-md-5 col-lg-4 form-group">
+      <input type="text"
+        class="form-control"
+        formControlName="dateRange"
+        #daterangepicker="bsDaterangepicker"
+        bsDaterangepicker
+        [bsConfig]="{ rangeInputFormat: 'MMMM Do YYYY, h:mm:ss a' }">
+    </div>
+    <div class="col-xs-12 col-12 col-md-3 form-group">
+      <button class="btn btn-success" (click)="daterangepicker.toggle()" [attr.aria-expanded]="daterangepicker.isOpen">Date Range Picker</button>
     </div>
   </div>
 </form>
diff --git a/demo/src/app/components/+datepicker/demos/custom-format/custom-format.ts b/demo/src/app/components/+datepicker/demos/custom-format/custom-format.ts
index 2594c42808..44ecb1c682 100644
--- a/demo/src/app/components/+datepicker/demos/custom-format/custom-format.ts
+++ b/demo/src/app/components/+datepicker/demos/custom-format/custom-format.ts
@@ -7,9 +7,10 @@ import { FormControl, FormGroup } from '@angular/forms';
 })
 export class DemoDatePickerCustomFormatComponent {
 
-  myForm = new FormGroup({
-    myDateYMD: new FormControl(new Date()),
-    myDateFull: new FormControl(new Date()),
-    myDateMDY: new FormControl(new Date())
+  form = new FormGroup({
+    dateYMD: new FormControl(new Date()),
+    dateFull: new FormControl(new Date()),
+    dateMDY: new FormControl(new Date()),
+    dateRange: new FormControl([new Date(), new Date()])
   });
 }