fix(datepicker): fix datepickers cypress test (#4771)

Author: svetoldo4444ka

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

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>