fix invalid date with format DD/MM/YYYY in button close

.gitignore

@@ -22,6 +22,7 @@ coverage/
 www/
 node_modules/
 tmp/
+dist/
 temp/
 platforms/
 plugins/

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",

projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.html

@@ -8,37 +8,37 @@ <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 [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>
       <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-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" 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>
+                <ion-icon [name]="icon.iconArrowDropdown" class="dp-down-arrow"></ion-icon>
               </ion-button>
             </ion-col>
           </ion-row>
         </ion-grid>
       </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>
@@ -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)}">
@@ -80,25 +80,25 @@ <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 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 *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()">
             {{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}}"

projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.scss

@@ -129,13 +129,15 @@
             color: var(--ion-color-primary-contrast);
             border-radius: 4px;
             font-weight: 500;
+            padding: unset;
         }
 
         .dp-today {
             border-radius: 4px;
             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: 0;
+    }
 }

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: '',
@@ -372,7 +384,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 });
   }
 
@@ -429,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 : [];
@@ -456,6 +474,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();
 

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>

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();
+      });
+    }
   }
 }

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">

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>

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>

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';
 
 

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>

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_;
 
@@ -22,6 +24,7 @@ export class HomePage implements OnInit {
   datePickerObj: any = {};
   datePickerObjPtBr: any = {};
   mydatePtBr = '06 Fev 2019';
+  mydatePtBrFormat = '13/05/1991';
 
   isDisableDatePicker: false;
   monthsList = [
@@ -42,7 +45,7 @@ export class HomePage implements OnInit {
 
   selectedDate;
 
-  constructor(public modalCtrl: ModalController) {}
+  constructor(public modalCtrl: ModalController) { }
 
   ngOnInit() {
     const disabledDates: Date[] = [
@@ -107,6 +110,29 @@ 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',
+      closeButton: false,
+      showTodayButton: false,
+      clearButton: false,
+      monthsList,
+      weeksList
+    };
+  }
+
   onChangeDate() {
     console.log('onChangeDate date ', this.mydate);
   }
@@ -150,8 +176,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;
+      }
     });
   }
 }

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>

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>