From 9671c7eb3d343014a019ae99e44bf12319da1765 Mon Sep 17 00:00:00 2001
From: svetoldo4444ka <svetlana.korotkykh@valor-software.com>
Date: Wed, 5 Dec 2018 20:50:15 +0200
Subject: [PATCH] fix(datepicker): fix datepickers cypress test (#4771)

---
 cypress/integration/datepicker_page_spec.ts         |  4 ++--
 .../reactive-forms/reactive-forms.component.html    | 13 ++++++-------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/cypress/integration/datepicker_page_spec.ts b/cypress/integration/datepicker_page_spec.ts
index b569dcab38..16a3de20f8 100644
--- a/cypress/integration/datepicker_page_spec.ts
+++ b/cypress/integration/datepicker_page_spec.ts
@@ -41,14 +41,14 @@ describe('Datepicker demo page test suite', () => {
     const reactiveForms = datepicker.exampleDemosArr.reactiveForms;
 
     it('chosen in datepicker date can be displayed in reactive form', () => {
-      const expectedDate = Cypress.moment().format('YYYY-MM-DD');
+      const expectedDateValue = Cypress.moment().format('MMM DD, YYYY');
       const day = Cypress.moment().format('D');
 
       cy.get(`${ reactiveForms } ${ datepicker.datepickerInput }`).click();
       datepicker.clickOnDayInCurrMonth(`${ datepicker.datepickerLastOpened }`, day);
 
       cy.get(`${ reactiveForms } ${ datepicker.formOutput }`)
-        .should('to.contain', `"date": "${ expectedDate }`);
+        .should('to.contain', `${ expectedDateValue }`);
     });
   });
 });
diff --git a/demo/src/app/components/+datepicker/demos/reactive-forms/reactive-forms.component.html b/demo/src/app/components/+datepicker/demos/reactive-forms/reactive-forms.component.html
index fcbcaa7997..c0cffbcf27 100644
--- a/demo/src/app/components/+datepicker/demos/reactive-forms/reactive-forms.component.html
+++ b/demo/src/app/components/+datepicker/demos/reactive-forms/reactive-forms.component.html
@@ -1,17 +1,16 @@
 <form [formGroup]="myForm">
   <div class="row">
     <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
-      <input type="text" class="form-control" placeholder="Datepicker" bsDatepicker formControlName="date" />
+      <input type="text" class="form-control mb-3" placeholder="Datepicker" bsDatepicker formControlName="date" />
+      <pre *ngIf="myForm.value.date" class="code-preview">{{myForm.value.date | date}}</pre>
     </div>
     <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
-      <input type="text" class="form-control" placeholder="Daterangepicker" bsDaterangepicker formControlName="range" />
+      <input type="text" class="form-control mb-3"
+             placeholder="Daterangepicker" bsDaterangepicker formControlName="range" />
+      <pre *ngIf="myForm.value.range"
+           class="code-preview">from {{myForm.value.range[0] | date}} to {{myForm.value.range[1] | date}}</pre>
     </div>
   </div>
 </form>
-<div class="row">
-  <div class="col-xs-12 col-md-12">
-    <pre class="code-preview">{{myForm.value | json}}</pre>
-  </div>
-</div>