From 8c7b0ca53fd2b0082e36bbcf3bfe4b94026b56b7 Mon Sep 17 00:00:00 2001
From: Leo1305Pineda <leo135pineda@gmail.com>
Date: Thu, 19 Nov 2020 02:35:59 -0400
Subject: [PATCH 1/2] fix invalid date with format DD/MM/YYYY in button close

---
 .gitignore                                    |  1 +
 projects/ionic4-datepicker/package.json       |  2 +-
 .../ionic4-datepicker-modal.component.html    | 20 ++++++------
 .../ionic4-datepicker-modal.component.scss    |  7 +++++
 .../ionic4-datepicker-modal.component.ts      |  7 ++++-
 src/app/app.component.html                    |  6 ++--
 src/app/app.component.ts                      | 10 +++---
 .../datepicker-button.page.html               |  2 +-
 .../datepicker-component.page.html            |  2 +-
 .../datepicker-directive.page.html            |  2 +-
 src/app/home/home.module.ts                   |  4 +--
 src/app/home/home.page.html                   | 11 ++++++-
 src/app/home/home.page.ts                     | 31 +++++++++++++++++--
 src/app/reactive-form/reactive-form.page.html |  6 ++--
 .../template-driven-form.page.html            |  6 ++--
 tsconfig.json                                 |  3 ++
 16 files changed, 86 insertions(+), 34 deletions(-)

diff --git a/.gitignore b/.gitignore
index 99c9c2c..b35e5f4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,6 +22,7 @@ coverage/
 www/
 node_modules/
 tmp/
+dist/
 temp/
 platforms/
 plugins/
diff --git a/projects/ionic4-datepicker/package.json b/projects/ionic4-datepicker/package.json
index eb76808..c2bc468 100644
--- a/projects/ionic4-datepicker/package.json
+++ b/projects/ionic4-datepicker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@logisticinfotech/ionic4-datepicker",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "ionic4-datepicker inspired by rajeshwar patlolla ionic1 datepicker",
   "keywords": ["Ionic-datepicker", "ionic", "ionic datepicker", "datepicker", "datepicker ionic", "datepicker for ionic", "datepicker for ionic framework"],
   "license": "SEE LICENSE IN LICENSE",
diff --git a/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.html b/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.html
index 0e87dfe..ca5351f 100644
--- a/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.html
+++ b/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.html
@@ -8,8 +8,8 @@ <h1 *ngIf="mainObj?.titleLabel">{{mainObj?.titleLabel}}</h1>
 </ion-header>
 
 
-<ion-content forceOverscroll="false" no-padding class="ionic_datepicker_modal_content">
-  <ion-grid class="dp-month-year-container" no-padding [ngClass]="isMonthYearSelectorOpen ? 'dp-virual-scroller-hide' : 'dp-virual-scroller-show'">
+<ion-content forceOverscroll="false" class="ionic_datepicker_modal_content ion-no-padding">
+  <ion-grid class="dp-month-year-container ion-no-padding" [ngClass]="isMonthYearSelectorOpen ? 'dp-virual-scroller-hide' : 'dp-virual-scroller-show'">
     <ion-row>
       <ion-col size="1.5" class="dp-left-right-arrow" (click)="prevMonth()">
         <ion-button [ngClass]="{'pointer_events_none':((firstDayEpoch - 86400000) < fromDate)}">
@@ -20,14 +20,14 @@ <h1 *ngIf="mainObj?.titleLabel">{{mainObj?.titleLabel}}</h1>
       <ion-col size="9">
         <ion-grid>
           <ion-row>
-            <ion-col class="dp-select-month-year" size="5.5" no-padding (click)="selectMonthYear(true)">
+            <ion-col class="dp-select-month-year ion-no-padding" size="5.5" (click)="selectMonthYear(true)">
               <ion-button class="dp-buttons">
                 {{ data.currentMonth }}
                 <ion-icon name="md-arrow-dropdown" class="dp-down-arrow"></ion-icon>
               </ion-button>
             </ion-col>
             <ion-col size="1"></ion-col>
-            <ion-col class="dp-select-month-year" size="5.5" no-padding (click)="selectMonthYear(false)">
+            <ion-col class="dp-select-month-year ion-no-padding" size="5.5" (click)="selectMonthYear(false)">
               <ion-button class="dp-buttons">
                 {{ data.currentYear }}
                 <ion-icon name="md-arrow-dropdown" class="dp-down-arrow"></ion-icon>
@@ -60,7 +60,7 @@ <h1 *ngIf="mainObj?.titleLabel">{{mainObj?.titleLabel}}</h1>
           <ion-row *ngFor="let row of rows;" class="dp-days-list">
             <ion-col *ngFor="let col of cols; let i = index ;" (click)="dateSelected(daysList[row + i])"
               [style.background-color]="(daysList[row + i]?.color) ? (daysList[row + i]?.color) : ''"
-              [style.border-radius]="(daysList[row + i]?.color) ? '4px' : ''" no-padding [ngClass]="{
+              [style.border-radius]="(daysList[row + i]?.color) ? '4px' : ''" [ngClass]="{
                 'dp-selecteddate': (daysList[row + i]?.epoch === selctedDateEpoch),
                 'dp-today' : (daysList[row + i]?.epoch == today),
                 'disabled' : (daysList[row + i]?.disabled)}">
@@ -82,23 +82,23 @@ <h1 *ngIf="mainObj?.titleLabel">{{mainObj?.titleLabel}}</h1>
 
 <ion-footer>
   <ion-toolbar>
-    <ion-grid no-padding>
-      <ion-row no-padding [ngClass]="mainObj?.btnCloseSetInReverse ? 'dp-btn-set-close-in-reverse' : ''">
-        <ion-col no-padding>
+    <ion-grid class="ion-no-padding">
+      <ion-row class="ion-no-padding" [ngClass]="mainObj?.btnCloseSetInReverse ? 'dp-btn-set-close-in-reverse' : ''">
+        <ion-col class="ion-no-padding">
           <ion-button class="ion-button" expand="{{mainObj?.btnProperties?.expand}}" fill="{{mainObj?.btnProperties?.fill}}"
             size="{{mainObj?.btnProperties?.size}}" color="{{mainObj?.btnProperties?.color}}" disabled="{{mainObj?.btnProperties?.disabled}}"
             strong="{{mainObj?.btnProperties?.strong}}" (click)="closeIonicDatePickerModal()">
             {{mainObj?.closeLabel}}
           </ion-button>
         </ion-col>
-        <ion-col no-padding *ngIf="mainObj?.showTodayButton">
+        <ion-col class="ion-no-padding" *ngIf="mainObj?.showTodayButton">
           <ion-button class="ion-button" expand="{{mainObj?.btnProperties?.expand}}" fill="{{mainObj?.btnProperties?.fill}}"
             size="{{mainObj?.btnProperties?.size}}" color="{{mainObj?.btnProperties?.color}}" disabled="{{mainObj?.btnProperties?.disabled}}"
             strong="{{mainObj?.btnProperties?.strong}}" (click)="setIonicDatePickerTodayDate()">
             {{mainObj?.todayLabel}}
           </ion-button>
         </ion-col>
-        <ion-col no-padding *ngIf="!mainObj?.closeOnSelect">
+        <ion-col class="ion-no-padding" *ngIf="!mainObj?.closeOnSelect">
           <ion-button class="ion-button" expand="{{mainObj?.btnProperties?.expand}}"
             fill="{{mainObj?.btnProperties?.fill}}" size="{{mainObj?.btnProperties?.size}}"
             color="{{mainObj?.btnProperties?.color}}"
diff --git a/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.scss b/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.scss
index 215c3e5..a338999 100644
--- a/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.scss
+++ b/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.scss
@@ -129,6 +129,7 @@
             color: var(--ion-color-primary-contrast);
             border-radius: 4px;
             font-weight: 500;
+            padding: unset;
         }
 
         .dp-today {
@@ -136,6 +137,7 @@
             font-weight: 500;
             border: 1px solid;
             border-color: var(--ion-color-primary);
+            padding: unset;
         }
 
         .dp-month-year-scroll-container {
@@ -171,6 +173,7 @@
 
     .disabled {
         color: #AAAAAA;
+        padding: unset;
     }
 
     .dp-virual-scroller-show {
@@ -229,4 +232,8 @@
             }
         }
     }
+
+    .ion-no-padding {
+        padding: unset;
+    }
 }
\ No newline at end of file
diff --git a/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.ts b/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.ts
index b2244b2..74c5e86 100644
--- a/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.ts
+++ b/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.ts
@@ -372,7 +372,8 @@ export class Ionic4DatepickerModalComponent implements OnInit, OnDestroy {
   closeModal(selectedDate) {
     // console.log('closeModal => ', selectedDate);
     this.modalCtrl.getTop();
-    const formattedDate = moment(selectedDate).format(this.mainObj.dateFormat);
+    const enc = (selectedDate && moment(selectedDate, this.mainObj.dateFormat).format(this.mainObj.dateFormat) !== selectedDate);
+    const formattedDate = enc ? moment(selectedDate).format(this.mainObj.dateFormat) : selectedDate;
     this.modalCtrl.dismiss({ 'date': formattedDate });
   }
 
@@ -456,6 +457,10 @@ export class Ionic4DatepickerModalComponent implements OnInit, OnDestroy {
     objConfig.yearInAscending = config.yearInAscending ? config.yearInAscending : false;
     objConfig.momentLocale = config.momentLocale ? config.momentLocale : 'en-US';
 
+    if (!!this.selectedDate.date && moment(this.selectedDate.date, objConfig.dateFormat).format(objConfig.dateFormat) !== this.selectedDate.date) {
+      this.selectedDate.date = moment(this.selectedDate.date).format(objConfig.dateFormat) ;
+    }
+  
     moment.locale(objConfig.momentLocale);
     objConfig.inputDate = this.selectedDate.date ? moment(this.selectedDate.date, objConfig.dateFormat).toDate() : new Date();
 
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 282397d..05db80b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,6 +1,6 @@
 <ion-app>
-  <ion-split-pane>
-    <ion-menu>
+  <ion-split-pane content-id="main">
+    <ion-menu content-id="main">
       <ion-header>
         <ion-toolbar>
           <ion-title>Menu</ion-title>
@@ -19,6 +19,6 @@
         </ion-list>
       </ion-content>
     </ion-menu>
-    <ion-router-outlet main></ion-router-outlet>
+    <ion-router-outlet id="main"></ion-router-outlet>
   </ion-split-pane>
 </ion-app>
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 9f19cbc..6a8a10e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -46,9 +46,11 @@ export class AppComponent {
   }
 
   initializeApp() {
-    this.platform.ready().then(() => {
-      this.statusBar.styleDefault();
-      this.splashScreen.hide();
-    });
+    if (this.platform.is('cordova') && (this.platform.is('android') || this.platform.is('ios'))) {
+      this.platform.ready().then(() => {
+        this.statusBar.styleDefault();
+        this.splashScreen.hide();
+      });
+    }
   }
 }
diff --git a/src/app/datepicker-button/datepicker-button.page.html b/src/app/datepicker-button/datepicker-button.page.html
index 25a9e05..bb0858c 100644
--- a/src/app/datepicker-button/datepicker-button.page.html
+++ b/src/app/datepicker-button/datepicker-button.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <ion-grid>
     <ion-row>
       <ion-col size="10">
diff --git a/src/app/datepicker-component/datepicker-component.page.html b/src/app/datepicker-component/datepicker-component.page.html
index f9808c1..068b810 100644
--- a/src/app/datepicker-component/datepicker-component.page.html
+++ b/src/app/datepicker-component/datepicker-component.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <li-ionic4-datepicker [(ngModel)]="mydate1" [inputDateConfig]="datePickerObj"></li-ionic4-datepicker>
 
   <ion-item>
diff --git a/src/app/datepicker-directive/datepicker-directive.page.html b/src/app/datepicker-directive/datepicker-directive.page.html
index 0b14376..12ffcdd 100644
--- a/src/app/datepicker-directive/datepicker-directive.page.html
+++ b/src/app/datepicker-directive/datepicker-directive.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <ion-item>
       <ion-input [(ngModel)]="mydate1" readonly [liIonic4Datepicker]="datePickerObj"></ion-input>
   </ion-item>
diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts
index 6c49d01..037f8a5 100644
--- a/src/app/home/home.module.ts
+++ b/src/app/home/home.module.ts
@@ -4,8 +4,8 @@ import { IonicModule } from '@ionic/angular';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-// import { Ionic4DatepickerModule } from '../../../projects/ionic4-datepicker/src/lib/ionic4-datepicker.module';
-import { Ionic4DatepickerModule } from 'ionic4-datepicker';
+import { Ionic4DatepickerModule } from '@projects/ionic4-datepicker/src/public_api';
+// import { Ionic4DatepickerModule } from 'ionic4-datepicker';
 import { HomePage } from './home.page';
 
 
diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html
index 33ebabd..842b61d 100644
--- a/src/app/home/home.page.html
+++ b/src/app/home/home.page.html
@@ -9,7 +9,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <ion-grid>
     <ion-row>
       <ion-col size="12">
@@ -36,6 +36,15 @@
         </ion-item>
       </ion-col>
     </ion-row>
+    <ion-row>
+      <ion-col size="12">
+        <ion-item>
+          <ion-label position="floating">Date Format DD/MM/YYYY</ion-label>
+          <ion-input readonly [(ngModel)]="mydatePtBrFormat" (ionChange)="onChangeDate()" [disabled]="isDisableDatePicker"
+            [liIonic4Datepicker]="datePickerObjDDMMYYY"></ion-input>
+        </ion-item>
+      </ion-col>
+    </ion-row>
     <ion-row>
       <ion-col size="12">
         <ion-item>
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
index 318f639..1a0a00a 100644
--- a/src/app/home/home.page.ts
+++ b/src/app/home/home.page.ts
@@ -22,6 +22,7 @@ export class HomePage implements OnInit {
   datePickerObj: any = {};
   datePickerObjPtBr: any = {};
   mydatePtBr = '06 Fev 2019';
+  mydatePtBrFormat = '13/05/1991';
 
   isDisableDatePicker: false;
   monthsList = [
@@ -42,7 +43,7 @@ export class HomePage implements OnInit {
 
   selectedDate;
 
-  constructor(public modalCtrl: ModalController) {}
+  constructor(public modalCtrl: ModalController) { }
 
   ngOnInit() {
     const disabledDates: Date[] = [
@@ -107,6 +108,28 @@ export class HomePage implements OnInit {
     };
   }
 
+  get datePickerObjDDMMYYY() {
+    const betweenYear = [5, 80];
+    moment.locale('es');
+    const monthsList = moment.monthsShort();
+    const weeksList = moment.weekdaysShort();
+    return {
+      inputDate: moment().subtract(betweenYear[0], 'year'),
+      fromDate: moment().subtract(betweenYear[1], 'year'),
+      toDate: moment().subtract(betweenYear[0], 'year'),
+      closeOnSelect: true,
+      btnCloseSetInReverse: true,
+      dateFormat: 'DD/MM/YYYY',
+      titleLabel: 'Seleccionar fecha',
+      setLabel: 'Aceptar',
+      closeLabel: 'Cancelar',
+      showTodayButton: false,
+      clearButton: false,
+      monthsList,
+      weeksList
+    };
+  }
+
   onChangeDate() {
     console.log('onChangeDate date ', this.mydate);
   }
@@ -150,8 +173,10 @@ export class HomePage implements OnInit {
 
     datePickerModal.onDidDismiss().then(data => {
       // this.isModalOpen = false;
-      console.log(data);
-      this.selectedDate = data.data.date;
+      if (data && data.data) {
+        console.log(data);
+        this.selectedDate = data.data.date;
+      }
     });
   }
 }
diff --git a/src/app/reactive-form/reactive-form.page.html b/src/app/reactive-form/reactive-form.page.html
index 1524d62..b3e43d4 100644
--- a/src/app/reactive-form/reactive-form.page.html
+++ b/src/app/reactive-form/reactive-form.page.html
@@ -7,10 +7,10 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
 
-  <ion-card no-margin>
-    <ion-card-header no-padding padding-top padding-start>
+  <ion-card>
+    <ion-card-header>
       <ion-card-title>Reactive Form</ion-card-title>
     </ion-card-header>
     <ion-card-content>
diff --git a/src/app/template-driven-form/template-driven-form.page.html b/src/app/template-driven-form/template-driven-form.page.html
index 4f66ff4..fc0c4d9 100644
--- a/src/app/template-driven-form/template-driven-form.page.html
+++ b/src/app/template-driven-form/template-driven-form.page.html
@@ -7,10 +7,10 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
 
-  <ion-card no-margin>
-    <ion-card-header no-padding padding-top padding-start>
+  <ion-card>
+    <ion-card-header>
       <ion-card-title>Template Driven Form</ion-card-title>
     </ion-card-header>
     <ion-card-content>
diff --git a/tsconfig.json b/tsconfig.json
index e225a61..165db3b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,6 +19,9 @@
       "dom"
     ],
     "paths": {
+      "@projects/*": [
+        "projects/*"
+      ],
       "ionic4-datepicker": [
         "dist/ionic4-datepicker"
       ],

From 82d246a9f9dda546bd162c946a3e17b0c23b22f9 Mon Sep 17 00:00:00 2001
From: Leo1305Pineda <leo135pineda@gmail.com>
Date: Thu, 19 Nov 2020 04:39:00 -0400
Subject: [PATCH 2/2] fix issues
 https://github.com/logisticinfotech/ionic4-datepicker/issues/50

---
 .../ionic4-datepicker-modal.component.html      | 14 +++++++-------
 .../ionic4-datepicker-modal.component.scss      |  2 +-
 .../ionic4-datepicker-modal.component.ts        | 17 +++++++++++++++++
 src/app/home/home.page.ts                       |  5 ++++-
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.html b/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.html
index ca5351f..c8549a7 100644
--- a/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.html
+++ b/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.html
@@ -8,12 +8,12 @@ <h1 *ngIf="mainObj?.titleLabel">{{mainObj?.titleLabel}}</h1>
 </ion-header>
 
 
-<ion-content forceOverscroll="false" class="ionic_datepicker_modal_content ion-no-padding">
+<ion-content [scrollY]="!isMonthYearSelectorOpen" forceOverscroll="false" class="ionic_datepicker_modal_content ion-no-padding">
   <ion-grid class="dp-month-year-container ion-no-padding" [ngClass]="isMonthYearSelectorOpen ? 'dp-virual-scroller-hide' : 'dp-virual-scroller-show'">
     <ion-row>
       <ion-col size="1.5" class="dp-left-right-arrow" (click)="prevMonth()">
         <ion-button [ngClass]="{'pointer_events_none':((firstDayEpoch - 86400000) < fromDate)}">
-          <ion-icon *ngIf="!mainObj?.arrowNextPrev?.prevArrowSrc" name="arrow-back"></ion-icon>
+          <ion-icon *ngIf="!mainObj?.arrowNextPrev?.prevArrowSrc" [name]="icon.iconArrowBack"></ion-icon>
           <ion-icon *ngIf="mainObj?.arrowNextPrev?.prevArrowSrc" src="{{mainObj?.arrowNextPrev?.prevArrowSrc}}"></ion-icon>
         </ion-button>
       </ion-col>
@@ -23,14 +23,14 @@ <h1 *ngIf="mainObj?.titleLabel">{{mainObj?.titleLabel}}</h1>
             <ion-col class="dp-select-month-year ion-no-padding" size="5.5" (click)="selectMonthYear(true)">
               <ion-button class="dp-buttons">
                 {{ data.currentMonth }}
-                <ion-icon name="md-arrow-dropdown" class="dp-down-arrow"></ion-icon>
+                <ion-icon [name]="icon.iconArrowDropdown" class="dp-down-arrow"></ion-icon>
               </ion-button>
             </ion-col>
             <ion-col size="1"></ion-col>
             <ion-col class="dp-select-month-year ion-no-padding" size="5.5" (click)="selectMonthYear(false)">
               <ion-button class="dp-buttons">
                 {{ data.currentYear }}
-                <ion-icon name="md-arrow-dropdown" class="dp-down-arrow"></ion-icon>
+                <ion-icon [name]="icon.iconArrowDropdown" class="dp-down-arrow"></ion-icon>
               </ion-button>
             </ion-col>
           </ion-row>
@@ -38,7 +38,7 @@ <h1 *ngIf="mainObj?.titleLabel">{{mainObj?.titleLabel}}</h1>
       </ion-col>
       <ion-col size="1.5" class="dp-left-right-arrow" (click)="nextMonth()">
         <ion-button [ngClass]="{'pointer_events_none':((lastDayEpoch + 86400000)> toDate)}">
-          <ion-icon *ngIf="!mainObj?.arrowNextPrev?.nextArrowSrc" name="arrow-forward"></ion-icon>
+          <ion-icon *ngIf="!mainObj?.arrowNextPrev?.nextArrowSrc" [name]="icon.iconArrowForward"></ion-icon>
           <ion-icon *ngIf="mainObj?.arrowNextPrev?.nextArrowSrc" src="{{mainObj?.arrowNextPrev?.nextArrowSrc}}"></ion-icon>
         </ion-button>
       </ion-col>
@@ -80,11 +80,11 @@ <h1 *ngIf="mainObj?.titleLabel">{{mainObj?.titleLabel}}</h1>
   </ion-list>
 </ion-content>
 
-<ion-footer>
+<ion-footer *ngIf="mainObj?.closeButton || mainObj?.showTodayButton || !mainObj?.closeOnSelect">
   <ion-toolbar>
     <ion-grid class="ion-no-padding">
       <ion-row class="ion-no-padding" [ngClass]="mainObj?.btnCloseSetInReverse ? 'dp-btn-set-close-in-reverse' : ''">
-        <ion-col class="ion-no-padding">
+        <ion-col *ngIf="mainObj?.closeLabel" class="ion-no-padding">
           <ion-button class="ion-button" expand="{{mainObj?.btnProperties?.expand}}" fill="{{mainObj?.btnProperties?.fill}}"
             size="{{mainObj?.btnProperties?.size}}" color="{{mainObj?.btnProperties?.color}}" disabled="{{mainObj?.btnProperties?.disabled}}"
             strong="{{mainObj?.btnProperties?.strong}}" (click)="closeIonicDatePickerModal()">
diff --git a/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.scss b/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.scss
index a338999..480602b 100644
--- a/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.scss
+++ b/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.scss
@@ -234,6 +234,6 @@
     }
 
     .ion-no-padding {
-        padding: unset;
+        padding: 0;
     }
 }
\ No newline at end of file
diff --git a/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.ts b/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.ts
index 74c5e86..bf062fb 100644
--- a/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.ts
+++ b/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.ts
@@ -5,6 +5,17 @@ import * as moment_ from 'moment';
 import { Ionic4DatepickerService } from '../ionic4-datepicker.service';
 const moment = moment_;
 
+export class IconDataPicker {
+    iconArrowBack: string;
+    iconArrowDropdown: string;
+    iconArrowForward: string;
+    constructor(o: any = {}) {
+      this.iconArrowBack = o.iconArrowBack || 'arrow-back';
+      this.iconArrowDropdown = o.iconArrowDropdown || 'md-arrow-dropdown';
+      this.iconArrowForward = o.iconArrowForward || 'arrow-forward';
+    }
+}
+
 @Component({
   selector: 'li-ionic4-datepicker-modal',
   templateUrl: './ionic4-datepicker-modal.component.html',
@@ -32,6 +43,7 @@ export class Ionic4DatepickerModalComponent implements OnInit, OnDestroy {
   fromDate;
   toDate;
   disableWeekdays = [];
+  icon: IconDataPicker = new IconDataPicker();
   data: any = {
     currentMonth: '',
     currentYear: '',
@@ -430,9 +442,14 @@ export class Ionic4DatepickerModalComponent implements OnInit, OnDestroy {
       this.selectedDate.date = config.inputDate;
     }
 
+    if (config.icon) {
+      this.icon = new IconDataPicker(config.icon || {});
+    }
+
     const objConfig: any = {};
     objConfig.from = config.fromDate ? config.fromDate : '';
     objConfig.to = config.toDate ? config.toDate : '';
+    objConfig.closeButton = typeof config.closeButton === 'boolean' ? !!config.closeButton : true;
     objConfig.showTodayButton = config.showTodayButton === undefined ? true : config.showTodayButton;
     objConfig.closeOnSelect = config.closeOnSelect ? config.closeOnSelect : false;
     objConfig.disableWeekDays = config.disableWeekDays ? config.disableWeekDays : [];
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
index 1a0a00a..6df0a98 100644
--- a/src/app/home/home.page.ts
+++ b/src/app/home/home.page.ts
@@ -1,7 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { Ionic4DatepickerModalComponent } from 'ionic4-datepicker';
 import { ModalController } from '@ionic/angular';
 
+// import { Ionic4DatepickerModalComponent } from 'ionic4-datepicker';
+import { Ionic4DatepickerModalComponent } from '@projects/ionic4-datepicker/src/public_api';
+
 import * as moment_ from 'moment';
 const moment = moment_;
 
@@ -123,6 +125,7 @@ export class HomePage implements OnInit {
       titleLabel: 'Seleccionar fecha',
       setLabel: 'Aceptar',
       closeLabel: 'Cancelar',
+      closeButton: false,
       showTodayButton: false,
       clearButton: false,
       monthsList,