Skip to content

Commit ba9d076

Browse files
chintan13chintan13
committed
version 1.4.2 closes #30, closes #31, closes #32 
1 parent e6011f2 commit ba9d076

7 files changed

Lines changed: 75 additions & 53 deletions

File tree

‎projects/ionic4-datepicker/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@logisticinfotech/ionic4-datepicker",
3-
"version": "1.4.1",
3+
"version": "1.4.2",
44
"description": "ionic4-datepicker inspired by rajeshwar patlolla ionic1 datepicker",
55
"keywords": ["Ionic-datepicker", "ionic", "ionic datepicker", "datepicker", "datepicker ionic", "datepicker for ionic", "datepicker for ionic framework"],
66
"license": "SEE LICENSE IN LICENSE",

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

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ <h1 *ngIf="mainObj?.titleLabel">{{mainObj?.titleLabel}}</h1>
77
</ion-toolbar>
88
</ion-header>
99

10-
<ion-content no-padding scrollX="false" scrollY="false" class="ionic_datepicker_modal_content">
1110

11+
<ion-content forceOverscroll="false" no-padding class="ionic_datepicker_modal_content">
1212
<ion-grid class="dp-month-year-container" no-padding [ngClass]="isMonthYearSelectorOpen ? 'dp-virual-scroller-hide' : 'dp-virual-scroller-show'">
1313
<ion-row>
1414
<ion-col size="1.5" class="dp-left-right-arrow" (click)="prevMonth()">
@@ -43,34 +43,41 @@ <h1 *ngIf="mainObj?.titleLabel">{{mainObj?.titleLabel}}</h1>
4343
</ion-button>
4444
</ion-col>
4545
</ion-row>
46-
</ion-grid>
47-
48-
<ion-grid class="dp-weeks-container" *ngIf="daysList" [ngClass]="isMonthYearSelectorOpen ? 'dp-virual-scroller-hide' : 'dp-virual-scroller-show'">
49-
<ion-row class=" dp-weeks-name">
50-
<ion-col *ngFor="let weekName of mainObj?.weeksList;">
51-
<div class="weeks">{{weekName}}</div>
52-
</ion-col>
53-
</ion-row>
54-
<ion-row *ngFor="let row of rows;" class="dp-days-list">
55-
<ion-col *ngFor="let col of cols; let i = index ;" (click)="dateSelected(daysList[row + i])"
56-
[style.background-color]="(daysList[row + i]?.color) ? (daysList[row + i]?.color) : ''"
57-
[style.border-radius]="(daysList[row + i]?.color) ? '4px' : ''" no-padding [ngClass]="{
58-
'dp-selecteddate': (daysList[row + i]?.epoch === selctedDateEpoch),
59-
'dp-today' : (daysList[row + i]?.epoch == today),
60-
'disabled' : (daysList[row + i]?.disabled)}">
61-
<div class="days">{{daysList[row + col]?.date}}</div>
46+
<ion-row>
47+
<ion-col>
48+
<ion-grid class="dp-weeks-container" *ngIf="daysList" [ngClass]="isMonthYearSelectorOpen ? 'dp-virual-scroller-hide' : 'dp-virual-scroller-show'">
49+
<ion-row class=" dp-weeks-name">
50+
<ion-col *ngFor="let weekName of mainObj?.weeksList;">
51+
<div class="weeks">{{weekName}}</div>
52+
</ion-col>
53+
</ion-row>
54+
<ion-row *ngFor="let row of rows;" class="dp-days-list">
55+
<ion-col *ngFor="let col of cols; let i = index ;" (click)="dateSelected(daysList[row + i])"
56+
[style.background-color]="(daysList[row + i]?.color) ? (daysList[row + i]?.color) : ''"
57+
[style.border-radius]="(daysList[row + i]?.color) ? '4px' : ''" no-padding [ngClass]="{
58+
'dp-selecteddate': (daysList[row + i]?.epoch === selctedDateEpoch),
59+
'dp-today' : (daysList[row + i]?.epoch == today),
60+
'disabled' : (daysList[row + i]?.disabled)}">
61+
<div class="days" [style.color]="(daysList[row + i]?.fontColor) ? (daysList[row + i]?.fontColor) : ''">
62+
{{daysList[row + col]?.date}}
63+
</div>
64+
</ion-col>
65+
</ion-row>
66+
</ion-grid>
6267
</ion-col>
6368
</ion-row>
6469
</ion-grid>
65-
6670
<ion-list class="dp-month-year-scroll-container" [ngClass]="isMonthYearSelectorOpen ? 'dp-virual-scroller-show' : 'dp-virual-scroller-hide'">
6771
<ion-item *ngFor="let monthYear of scrollingMonthOrYearArray;let i=index;" id="{{i +'list'}}" (click)="onChangeMonthYear(monthYear)">
6872
<ion-label [ngClass]="selectedYearOrMonth === monthYear ? 'dp-selected' : ''">{{ monthYear }}</ion-label>
6973
</ion-item>
7074
</ion-list>
71-
7275
</ion-content>
7376

77+
<!-- <ion-content scrollX="false" scrollY="false" no-padding class="ionic_datepicker_modal_content">
78+
79+
</ion-content> -->
80+
7481
<ion-footer>
7582
<ion-toolbar>
7683
<ion-grid no-padding>

‎projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.ts‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import { Component, OnInit, ViewChild } from '@angular/core';
1+
import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
22
import { NavParams, ModalController, IonContent } from '@ionic/angular';
33

44
import * as moment_ from 'moment';
5+
import { Ionic4DatepickerService } from '../ionic4-datepicker.service';
56
const moment = moment_;
67

78
@Component({
89
selector: 'li-ionic4-datepicker-modal',
910
templateUrl: './ionic4-datepicker-modal.component.html',
1011
styleUrls: ['./ionic4-datepicker-modal.component.scss']
1112
})
12-
export class Ionic4DatepickerModalComponent implements OnInit {
13+
export class Ionic4DatepickerModalComponent implements OnInit, OnDestroy {
1314

1415
@ViewChild(IonContent) content: IonContent;
1516

@@ -26,7 +27,7 @@ export class Ionic4DatepickerModalComponent implements OnInit {
2627
lastDayEpoch;
2728

2829
disabledDates = [];
29-
highlightedDates = {};
30+
highlightedDates: any = {};
3031

3132
fromDate;
3233
toDate;
@@ -59,7 +60,8 @@ export class Ionic4DatepickerModalComponent implements OnInit {
5960

6061
constructor(
6162
private navParams: NavParams,
62-
private modalCtrl: ModalController
63+
private modalCtrl: ModalController,
64+
public datePickerService: Ionic4DatepickerService
6365
) {
6466
this.today = this.resetHMSM(new Date()).getTime();
6567
if (this.navParams.get('selectedDate')) {
@@ -71,9 +73,14 @@ export class Ionic4DatepickerModalComponent implements OnInit {
7173
}
7274

7375
ngOnInit() {
76+
this.datePickerService.isModalOpen = true;
7477
this.initDatePicker();
7578
}
7679

80+
ngOnDestroy() {
81+
this.datePickerService.isModalOpen = false;
82+
}
83+
7784
// Reset the hours, minutes, seconds and milli seconds
7885
resetHMSM(currentDate) {
7986
currentDate.setHours(0);
@@ -238,8 +245,9 @@ export class Ionic4DatepickerModalComponent implements OnInit {
238245
for (let i = 0; i < obj.highlightedDates.length; i++) {
239246
const hDate = obj.highlightedDates[i].date;
240247
const hColor = obj.highlightedDates[i].color;
248+
const hFontColor = obj.highlightedDates[i].fontColor;
241249
const hDateTime = this.resetHMSM(new Date(hDate)).getTime();
242-
this.highlightedDates[hDateTime] = hColor;
250+
this.highlightedDates[hDateTime] = { color: hColor, fontColor: hFontColor };
243251
}
244252
}
245253
}
@@ -294,14 +302,17 @@ export class Ionic4DatepickerModalComponent implements OnInit {
294302
|| this.mainObj.disableWeekDays.indexOf(tempDate.getDay()) >= 0;
295303
}
296304

305+
const hightLightDate = this.highlightedDates[tempDate.getTime()];
306+
297307
this.daysList.push({
298308
date: tempDate.getDate(),
299309
month: tempDate.getMonth(),
300310
year: tempDate.getFullYear(),
301311
day: tempDate.getDay(),
302312
epoch: tempDate.getTime(),
303313
disabled: disabled,
304-
color: this.highlightedDates[tempDate.getTime()]
314+
color: hightLightDate && hightLightDate.color ? hightLightDate.color : null,
315+
fontColor: hightLightDate && hightLightDate.fontColor ? hightLightDate.fontColor : null
305316
});
306317
}
307318

@@ -405,6 +416,7 @@ export class Ionic4DatepickerModalComponent implements OnInit {
405416
// const config = this.mainObj;
406417

407418
if (config.inputDate && !this.selectedDate.date) {
419+
this.isSelectedDateFound = true;
408420
this.selectedDate.date = config.inputDate;
409421
}
410422

‎projects/ionic4-datepicker/src/lib/ionic4-datepicker.service.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,7 @@ import { Injectable } from '@angular/core';
55
})
66
export class Ionic4DatepickerService {
77

8+
isModalOpen = false;
9+
810
constructor() { }
911
}

‎projects/ionic4-datepicker/src/lib/li-ionic4-datepicker.directive.ts‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,28 @@ import { Ionic4DatepickerModalComponent } from './ionic4-datepicker-modal/ionic4
44
import { NgModel, NgControl } from '@angular/forms';
55

66
import * as moment_ from 'moment';
7-
8-
const moment = moment_;
7+
import { Ionic4DatepickerService } from './ionic4-datepicker.service';
98

109
@Directive({
1110
selector: '[liIonic4Datepicker]',
1211
exportAs: 'liIonic4Datepicker',
13-
providers: [NgModel]
12+
providers: [NgModel],
1413
})
1514
export class LiIonic4DatepickerDirective implements OnInit {
1615

1716
@Input('liIonic4Datepicker') inputDateConfig: any;
1817

1918
closeIcon;
2019
selectedDate: any = {};
21-
// isModalOpen: any = false;
20+
isModalOpen: any = false;
2221

2322
constructor(
2423
private modalCtrl: ModalController,
2524
public ngModel: NgModel,
2625
public control: NgControl,
2726
public el: ElementRef,
2827
public renderer2: Renderer2,
28+
public datePickerService: Ionic4DatepickerService
2929
) { }
3030

3131
ngOnInit() {
@@ -84,24 +84,14 @@ export class LiIonic4DatepickerDirective implements OnInit {
8484
}
8585
}
8686

87-
// @HostListener('click')
88-
// onClick() {
89-
// // console.log('on click of component =>', this.inputDateConfig);
90-
// if (!this.isModalOpen) {
91-
// this.isModalOpen = true;
92-
// this.openDatePicker();
93-
// }
94-
// }
95-
9687
@HostListener('ionFocus')
97-
onFocus() {
98-
// if (!this.isModalOpen) {
99-
// this.isModalOpen = true;
88+
public onFocus() {
89+
if (this.datePickerService.isModalOpen) {
90+
return;
91+
}
10092
this.openDatePicker();
101-
// }
10293
}
10394

104-
10595
async openDatePicker() {
10696
// console.log('openDatePicker');
10797

@@ -114,7 +104,6 @@ export class LiIonic4DatepickerDirective implements OnInit {
114104

115105
datePickerModal.onDidDismiss()
116106
.then((data) => {
117-
// this.isModalOpen = false;
118107
if (data.data && data.data.date && data.data.date !== 'Invalid date') {
119108
this.selectedDate.date = data.data.date;
120109
this.control.control.setValue(data.data.date);

‎src/app/datepicker-directive/datepicker-directive.page.ts‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export class DatepickerDirectivePage implements OnInit {
3333
// inputDate: new Date('12'), // If you want to set month in date-picker
3434
// inputDate: new Date('2018'), // If you want to set year in date-picker
3535
// inputDate: new Date('2018-12'), // If you want to set year & month in date-picker
36-
// inputDate: new Date('2018-12-01'), // If you want to set date in date-picker
36+
inputDate: new Date('2018-12-01'), // If you want to set date in date-picker
3737

3838
// fromDate: new Date('2015-12-20'), // need this in order to have toDate
3939
// toDate: new Date('2019-12-25'),
@@ -69,12 +69,24 @@ export class DatepickerDirectivePage implements OnInit {
6969
}, // This object supports only SVG files.
7070

7171
highlightedDates: [
72-
{ date: new Date('2019-08-10'), color: '#ee88bf' },
73-
{ date: new Date('2019-08-12'), color: '#50f2b1' },
74-
{ date: new Date('2019-08-14'), color: '#f2ef50' },
75-
{ date: new Date('2019-08-16'), color: '#ee99bf' },
76-
{ date: new Date('2019-08-18'), color: '#5000b1' },
77-
{ date: new Date('2019-08-20'), color: '#f21250' },
72+
// { date: new Date('2019-09-10'), color: '#ee88bf', fontColor: '#fff' },
73+
// { date: new Date('2019-09-12'), color: '#50f2b1', fontColor: '#fff' },
74+
// { date: new Date('2019-09-14'), color: '#f2ef50', fontColor: '#fff' },
75+
// { date: new Date('2019-09-16'), color: '#ee99bf', fontColor: '#fff' },
76+
// { date: new Date('2019-09-18'), color: '#5000b1', fontColor: '#fff' },
77+
// { date: new Date('2019-09-20'), color: '#f21250', fontColor: '#fff' },
78+
// { date: new Date('2019-08-10'), color: '#ee88bf', fontColor: '#fff' },
79+
// { date: new Date('2019-08-12'), color: '#50f2b1', fontColor: '#fff' },
80+
// { date: new Date('2019-08-14'), color: '#f2ef50', fontColor: '#fff' },
81+
// { date: new Date('2019-08-16'), color: '#ee99bf', fontColor: '#fff' },
82+
// { date: new Date('2019-08-18'), color: '#5000b1', fontColor: '#fff' },
83+
// { date: new Date('2019-08-20'), color: '#f21250', fontColor: '#fff' },
84+
// { date: new Date('2019-07-10'), color: '#ee88bf', fontColor: '#fff' },
85+
// { date: new Date('2019-07-12'), color: '#50f2b1', fontColor: '#fff' },
86+
// { date: new Date('2019-07-14'), color: '#f2ef50', fontColor: '#fff' },
87+
// { date: new Date('2019-07-16'), color: '#ee99bf', fontColor: '#fff' },
88+
// { date: new Date('2019-07-18'), color: '#5000b1', fontColor: '#fff' },
89+
// { date: new Date('2019-07-20'), color: '#f21250', fontColor: '#fff' },
7890
]
7991
};
8092
}

‎src/global.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
.li-ionic4-datePicker {
1414
.modal-wrapper {
1515
height: 460px;
16-
max-height: 460px;
16+
max-height: 100%;
1717
width: 312px;
1818
border-radius: 0px;
1919
--ion-color-primary: red; // This Variable used for the change of colour ion-datepicker only.

0 commit comments

Comments
 (0)