Skip to content

Commit 1af61a5

Browse files
chintan13chintan13
committed
implemented highlightedDates version 1.4.0 published closes #25, closes #23 
1 parent 275de82 commit 1af61a5

File tree

12 files changed

+178
-79
lines changed

12 files changed

+178
-79
lines changed

‎package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,9 @@
3232
"@ionic-native/status-bar": "^5.0.0",
3333
"@ionic/angular": "^4.1.0",
3434
"core-js": "^2.5.4",
35-
"rxjs": "~6.3.3",
36-
"zone.js": "~0.8.29"
35+
"rxjs": "~6.5.1",
36+
"zone.js": "~0.8.29",
37+
"tslib": "^1.9.0"
3738
},
3839
"devDependencies": {
3940
"@angular-devkit/architect": "~0.12.3",
@@ -46,9 +47,9 @@
4647
"@angular/compiler-cli": "~7.2.2",
4748
"@angular/language-service": "~7.2.2",
4849
"@ionic/angular-toolkit": "~1.4.0",
49-
"@types/node": "~10.12.0",
5050
"@types/jasmine": "~2.8.8",
5151
"@types/jasminewd2": "~2.0.3",
52+
"@types/node": "~10.12.0",
5253
"codelyzer": "~4.5.0",
5354
"jasmine-core": "~2.99.1",
5455
"jasmine-spec-reporter": "~4.2.1",
@@ -58,6 +59,7 @@
5859
"karma-jasmine": "~1.1.2",
5960
"karma-jasmine-html-reporter": "^0.2.2",
6061
"ng-packagr": "^4.2.0",
62+
"node-sass": "^4.12.0",
6163
"protractor": "~5.4.0",
6264
"ts-node": "~8.0.0",
6365
"tsickle": ">=0.34.0",

‎projects/ionic4-datepicker/package.json‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
{
22
"name": "@logisticinfotech/ionic4-datepicker",
3-
"version": "1.3.0",
3+
"version": "1.4.0",
44
"description": "ionic4-datepicker inspired by rajeshwar patlolla ionic1 datepicker",
5-
"keywords" :["Ionic-datepicker", "ionic", "ionic datepicker", "datepicker", "datepicker ionic", "datepicker for ionic", "datepicker for ionic framework"],
6-
"license" : "SEE LICENSE IN LICENSE",
5+
"keywords": ["Ionic-datepicker", "ionic", "ionic datepicker", "datepicker", "datepicker ionic", "datepicker for ionic", "datepicker for ionic framework"],
6+
"license": "SEE LICENSE IN LICENSE",
77
"repository": {
8-
"type" : "git",
9-
"url" : "https://github.com/logisticinfotech/ionic4-datepicker"
8+
"type": "git",
9+
"url": "https://github.com/logisticinfotech/ionic4-datepicker"
1010
},
11-
"homepage" :"https://logisticinfotech.com/blog/ionic4-datepicker-component",
11+
"homepage": "https://logisticinfotech.com/blog/ionic4-datepicker-component",
1212
"peerDependencies": {
13-
"@angular/common": "^7.2.0",
14-
"@angular/core": "^7.2.0",
1513
"moment": "^2.24.0"
1614
}
1715
}

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,12 @@ <h1 *ngIf="mainObj?.titleLabel">{{mainObj?.titleLabel}}</h1>
5252
</ion-col>
5353
</ion-row>
5454
<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])" no-padding [ngClass]="{'dp-selecteddate': (daysList[row + i]?.epoch === selctedDateEpoch),
56-
'dp-today' : (daysList[row + i]?.epoch == today),
57-
'disabled' : (daysList[row + i]?.disabled)}">
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)}">
5861
<div class="days">{{daysList[row + col]?.date}}</div>
5962
</ion-col>
6063
</ion-row>

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

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@ export class Ionic4DatepickerModalComponent implements OnInit {
2424
selctedDateEpoch;
2525
firstDayEpoch;
2626
lastDayEpoch;
27+
2728
disabledDates = [];
29+
highlightedDates = {};
30+
2831
fromDate;
2932
toDate;
3033
disableWeekdays = [];
@@ -79,7 +82,7 @@ export class Ionic4DatepickerModalComponent implements OnInit {
7982

8083
// this method change month or year list to dateList
8184
changeToDateList() {
82-
console.log('changeToDateList');
85+
// console.log('changeToDateList');
8386
this.isMonthYearSelectorOpen = false;
8487
}
8588

@@ -102,7 +105,7 @@ export class Ionic4DatepickerModalComponent implements OnInit {
102105

103106
// select month or year
104107
onChangeMonthYear(monthYear) {
105-
console.log('onChangeMonthYear', monthYear);
108+
// console.log('onChangeMonthYear', monthYear);
106109
if (monthYear) {
107110
if (this.isMonthSelect) {
108111
this.data.currentMonth = monthYear;
@@ -122,33 +125,6 @@ export class Ionic4DatepickerModalComponent implements OnInit {
122125

123126
}
124127

125-
// // Month changed
126-
// monthChanged(event) {
127-
// // console.log('monthChanged =>', event);
128-
// if (event && event.target && event.target.value) {
129-
// this.data.currentMonth = event.target.value;
130-
// }
131-
// const monthNumber = this.monthsList.indexOf(this.data.currentMonth);
132-
// // console.log('monthChanged monthNumber : ' + monthNumber + ' event.target.value : ' + event.target.value);
133-
// // console.log('currentDate before ', this.currentDate);
134-
// this.currentDate.setDate(1);
135-
// this.currentDate.setMonth(monthNumber);
136-
// // console.log('currentDate after ', this.currentDate);
137-
// this.refreshDateList(this.currentDate);
138-
// // this.changeDaySelected();
139-
// }
140-
141-
// // Year changed
142-
// yearChanged(event) {
143-
// // console.log('yearChanged =>', event);
144-
// if (event && event.target && event.target.value) {
145-
// this.data.currentYear = event.target.value;
146-
// }
147-
// this.currentDate.setFullYear(this.data.currentYear);
148-
// this.refreshDateList(this.currentDate);
149-
// // this.changeDaySelected();
150-
// }
151-
152128
// Previous month
153129
prevMonth() {
154130
// console.log('prevNext', this.currentDate);
@@ -249,6 +225,21 @@ export class Ionic4DatepickerModalComponent implements OnInit {
249225
}
250226
}
251227

228+
// Set hightlighted dates
229+
setHightlightedDates(obj) {
230+
if (!obj.highlightedDates || obj.highlightedDates.length === 0) {
231+
this.highlightedDates = {};
232+
} else {
233+
this.highlightedDates = {};
234+
for (let i = 0; i < obj.highlightedDates.length; i++) {
235+
const hDate = obj.highlightedDates[i].date;
236+
const hColor = obj.highlightedDates[i].color;
237+
const hDateTime = this.resetHMSM(new Date(hDate)).getTime();
238+
this.highlightedDates[hDateTime] = hColor;
239+
}
240+
}
241+
}
242+
252243
// Refresh the list of the dates of a month
253244
refreshDateList(currentDate) {
254245
// console.log('refreshDateList =>', currentDate);
@@ -305,7 +296,8 @@ export class Ionic4DatepickerModalComponent implements OnInit {
305296
year: tempDate.getFullYear(),
306297
day: tempDate.getDay(),
307298
epoch: tempDate.getTime(),
308-
disabled: disabled
299+
disabled: disabled,
300+
color: this.highlightedDates[tempDate.getTime()]
309301
});
310302
}
311303

@@ -463,6 +455,12 @@ export class Ionic4DatepickerModalComponent implements OnInit {
463455
objConfig.arrowNextPrev.prevArrowSrc = arrowNextPrev.prevArrowSrc ? arrowNextPrev.prevArrowSrc : false;
464456
}
465457

458+
objConfig.highlightedDates = [];
459+
if (config.highlightedDates && config.highlightedDates.length > 0) {
460+
objConfig.highlightedDates = config.highlightedDates;
461+
462+
this.setHightlightedDates(objConfig);
463+
}
466464
// console.log('config =>', objConfig);
467465
return objConfig;
468466
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
<input type="text" (focus)="$event.preventDefault()" (click)="openDatePicker(value)" readonly [(ngModel)]="value" start />
1+
<input type="text" class="li-dp-input" (focus)="$event.preventDefault()" (click)="openDatePicker(value)" readonly
2+
[(ngModel)]="value" start />

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,16 @@ export class DatepickerButtonPage implements OnInit {
7575
arrowNextPrev: {
7676
// nextArrowSrc: 'assets/images/arrow_right.svg',
7777
// prevArrowSrc: 'assets/images/arrow_left.svg'
78-
} // This object supports only SVG files.
78+
}, // This object supports only SVG files.
79+
80+
// highlightedDates: [
81+
// { date: new Date('2019-07-10'), color: '#ee17bf' },
82+
// { date: new Date('2019-07-12'), color: '#50f2b1' },
83+
// { date: new Date('2019-07-14'), color: '#f2ef50' },
84+
// { date: new Date('2019-08-10'), color: '#ee17bf' },
85+
// { date: new Date('2019-08-12'), color: '#50f2b1' },
86+
// { date: new Date('2019-08-14'), color: '#f2ef50' },
87+
// ]
7988
};
8089
}
8190

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,16 @@ export class DatepickerComponentPage implements OnInit {
6565
arrowNextPrev: {
6666
// nextArrowSrc: 'assets/images/arrow_right.svg',
6767
// prevArrowSrc: 'assets/images/arrow_left.svg'
68-
} // This object supports only SVG files.
68+
}, // This object supports only SVG files.
69+
70+
// highlightedDates: [
71+
// { date: new Date('2019-07-10'), color: '#ee17bf' },
72+
// { date: new Date('2019-07-12'), color: '#50f2b1' },
73+
// { date: new Date('2019-07-14'), color: '#f2ef50' },
74+
// { date: new Date('2019-08-10'), color: '#ee17bf' },
75+
// { date: new Date('2019-08-12'), color: '#50f2b1' },
76+
// { date: new Date('2019-08-14'), color: '#f2ef50' },
77+
// ]
6978
};
7079
}
7180

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import { Component, OnInit, ElementRef } from '@angular/core';
66
})
77
export class DatepickerDirectivePage implements OnInit {
88

9-
mydate1;
9+
// mydate1;
1010
mydate2 = '';
11-
// mydate1 = '11 Dec 2018';
11+
mydate1 = '24 Aug 2019';
1212
// mydate2 = '12 Dec 2018';
1313
datePickerObj: any = {};
1414

@@ -53,7 +53,6 @@ export class DatepickerDirectivePage implements OnInit {
5353
// momentLocale: 'pt-BR',
5454
// yearInAscending: true,
5555
// btnCloseSetInReverse: false,
56-
5756
btnProperties: {
5857
expand: 'block', // "block" | "full"
5958
fill: '', // "clear" | "default" | "outline" | "solid"
@@ -67,7 +66,16 @@ export class DatepickerDirectivePage implements OnInit {
6766
arrowNextPrev: {
6867
// nextArrowSrc: 'assets/images/arrow_right.svg',
6968
// prevArrowSrc: 'assets/images/arrow_left.svg'
70-
} // This object supports only SVG files.
69+
}, // This object supports only SVG files.
70+
71+
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' },
78+
]
7179
};
7280
}
7381
}

0 commit comments

Comments
 (0)