diff --git a/projects/ngx-datetime-range-picker/package.json b/projects/ngx-datetime-range-picker/package.json index d2299da..d37a515 100644 --- a/projects/ngx-datetime-range-picker/package.json +++ b/projects/ngx-datetime-range-picker/package.json @@ -1,6 +1,6 @@ { "name": "ngx-datetime-range-picker", - "version": "1.1.7", + "version": "1.1.8", "homepage": "https://github.com/BhavinPatel04/ngx-datetime-range-picker", "bugs": "https://github.com/BhavinPatel04/ngx-datetime-range-picker/issues", "repository": { diff --git a/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.html b/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.html index a79c6c9..b7a5bf4 100644 --- a/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.html +++ b/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.html @@ -36,7 +36,7 @@
-
+
- - - - - - - - - - - - - - - - - - - - -
- - -
-
- - + +
+
+
+ + + - - {{ month }} - - - -
-
- - + + +
+
+ + + - - {{ year }} - - - -
+ {{ year }} + + +
-
- -
{{ day }}
{{ row.rowNumberText }} + +
+ fontSet="fa" + fontIcon="fa-chevron-right" + (click)="onClickNext(side)" + > +
+
+ + + + + + + + + + + + + +
{{ day }}
+ {{ row.rowNumberText }} + +
{{ item.rowItemText }}
+
+ +
+
+
@@ -189,7 +194,8 @@
diff --git a/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.scss b/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.scss index ed31ec0..fb55d61 100644 --- a/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.scss +++ b/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.scss @@ -56,15 +56,13 @@ $fa-font-path: "~font-awesome/fonts"; } .calendar-view { - position: absolute; - color: inherit; + width: fit-content; background-color: #fff; - border-radius: 4px; padding: 12px 8px; margin-top: 2px; - z-index: 99999; - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); - border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 4px; + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), + 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } .calendar-view:before, @@ -286,54 +284,57 @@ $fa-font-path: "~font-awesome/fonts"; } .calendar-table { - th, - td { - white-space: nowrap; - text-align: center; - min-width: 32px; - padding: 5px; - } + .calendar-side-container { + .calendar-label-container { + display: inline-flex; + width: 100%; + padding: 5px; + } - td { - color: #bbb; + table { + table-layout: fixed; + min-width: 100%; - .todayDate { - font-size: 6px; - } - } + th, + td { + white-space: nowrap; + text-align: center; + min-width: 32px; + padding: 5px; + } - td.valid { - cursor: pointer; - } + td { + color: #bbb; - td.available, - th.available { - cursor: pointer; - color: #333; - } + .todayDate { + font-size: 6px; + } + } - th.available { - width: 32px; - } + td.valid { + cursor: pointer; + } - th.prev { - position: absolute; - left: 0; - } + td.available, + th.available { + cursor: pointer; + color: #333; + } - th.next { - position: absolute; - right: 0; - } + th.available { + width: 32px; + } - td.available:hover, - th.available:hover { - background-color: #eee; - } + td.available:hover, + th.available:hover { + background-color: #eee; + } - td.in-range { - background-color: #f6f6f6; - color: #2f7ed8; + td.in-range { + background-color: #f6f6f6; + color: #2f7ed8; + } + } } } @@ -349,7 +350,8 @@ $fa-font-path: "~font-awesome/fonts"; } .month-select, - .year-select { + .year-select, + .timeItem-select { background: #fff; padding: 0; box-shadow: none; diff --git a/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.spec.ts b/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.spec.ts index 6180f38..76d3de6 100644 --- a/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.spec.ts +++ b/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.spec.ts @@ -109,14 +109,24 @@ describe("NgxDatetimeRangePickerComponent", () => { it("#isPrevAvailable", () => { component.config.minDate = "2017-01-01"; - expect(component.isPrevAvailable("Feb 2017")).toBeTruthy(); - expect(component.isPrevAvailable("Jan 2017")).toBeFalsy(); + const side = "left"; + component.state.selectedMonth[side] = "Feb"; + component.state.selectedYear[side] = "2017"; + expect(component.isPrevAvailable(side)).toBeTruthy(); + + component.state.selectedMonth[side] = "Jan"; + expect(component.isPrevAvailable(side)).toBeFalsy(); }); it("#isNextAvailable", () => { component.config.maxDate = "2017-03-31"; - expect(component.isNextAvailable("Feb 2017")).toBeTruthy(); - expect(component.isNextAvailable("Mar 2017")).toBeFalsy(); + const side = "left"; + component.state.selectedMonth[side] = "Feb"; + component.state.selectedYear[side] = "2017"; + expect(component.isNextAvailable(side)).toBeTruthy(); + + component.state.selectedMonth[side] = "Mar"; + expect(component.isNextAvailable(side)).toBeFalsy(); }); it("#getCalendarColspan", () => { @@ -130,16 +140,18 @@ describe("NgxDatetimeRangePickerComponent", () => { }); it("#onClickPrevious", () => { - const month = "Feb 2017"; const side = "left"; - component.onClickPrevious(month, side); + component.state.selectedMonth[side] = "Feb"; + component.state.selectedYear[side] = "2017"; + component.onClickPrevious(side); expect(component.state.dates[side]).toBeDefined(); }); it("#onClickNext", () => { - const month = "Feb 2017"; const side = "left"; - component.onClickNext(month, side); + component.state.selectedMonth[side] = "Feb"; + component.state.selectedYear[side] = "2017"; + component.onClickNext(side); expect(component.state.dates[side]).toBeDefined(); }); @@ -253,10 +265,6 @@ describe("NgxDatetimeRangePickerComponent", () => { expect(component.config.startDate).toEqual(startDate); expect(component.config.endDate).toEqual(endDate); - rangeLabel = "Custom Range"; - component.onRangeClick(rangeLabel, dateRangeModel); - expect(component.state.sides.length).toBeGreaterThan(0); - rangeLabel = "Custom Range"; component.state.customRange = true; component.onRangeClick(rangeLabel, dateRangeModel); diff --git a/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.ts b/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.ts index eeec530..8fdc5eb 100644 --- a/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.ts +++ b/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.ts @@ -79,7 +79,9 @@ export class NgxDatetimeRangePickerComponent implements OnChanges { this.renderer.listen("document", "click", (event: MouseEvent) => { if ( this.state.isCalendarVisible && - event.target && + event.target && + !(event.target).parentElement.getElementsByClassName("ngx-datetime-range-picker-select-panel") + .length && (event.target).className !== "mat-option-text" && this.element.nativeElement !== event.target && !this.element.nativeElement.contains(event.target) @@ -183,24 +185,28 @@ export class NgxDatetimeRangePickerComponent implements OnChanges { } } - isPrevAvailable(month: string): boolean { + isPrevAvailable(side): boolean { + const { label, labelFormat, type } = this.service.getLabelProps(this.state, this.config.type, side); + return ( - moment(month, "MMM YYYY") - .startOf("month") + moment(label, labelFormat) + .startOf(type) .valueOf() > moment(this.config.minDate, DEFAULT_DATE_FORMAT) - .startOf("month") + .startOf(type) .valueOf() ); } - isNextAvailable(month: string): boolean { + isNextAvailable(side): boolean { + const { label, labelFormat, type } = this.service.getLabelProps(this.state, this.config.type, side); + return ( - moment(month, "MMM YYYY") - .endOf("month") + moment(label, labelFormat) + .endOf(type) .valueOf() < moment(this.config.maxDate, DEFAULT_DATE_FORMAT) - .endOf("month") + .endOf(type) .valueOf() ); } @@ -213,19 +219,23 @@ export class NgxDatetimeRangePickerComponent implements OnChanges { return this.service.getCalendarRowItemColspan(this.config.type); } - onClickPrevious(month: string, side: string) { - const startDate = moment(month, "MMM YYYY") - .subtract(1, "month") - .startOf("month") + onClickPrevious(side: string) { + const { label, labelFormat, type } = this.service.getLabelProps(this.state, this.config.type, side); + const startDate = moment(label, labelFormat) + .subtract(1, type) + .startOf(type) .format(DEFAULT_DATE_FORMAT); + this.state.dates[side] = this.generateCalendar(startDate, side); } - onClickNext(month: string, side: string) { - const endDate = moment(month, "MMM YYYY") - .add(1, "month") - .endOf("month") + onClickNext(side: string) { + const { label, labelFormat, type } = this.service.getLabelProps(this.state, this.config.type, side); + const endDate = moment(label, labelFormat) + .add(1, type) + .endOf(type) .format(DEFAULT_DATE_FORMAT); + this.state.dates[side] = this.generateCalendar(endDate, side); } @@ -319,27 +329,13 @@ export class NgxDatetimeRangePickerComponent implements OnChanges { onRangeClick(rangeLabel: string, dateRangeModel: Options) { this.state.activeRange = rangeLabel; if (rangeLabel === "Custom Range") { - this.state.customRange = !this.state.customRange; - if (this.state.customRange) { - this.updateCalendar(); - } else { - this.state.sides.length = 0; - this.state.dates = {}; - if (this.config.timePicker) { - this.state.times = {}; - } - } + this.state.customRange = true; } else { + this.state.customRange = false; this.config.startDate = dateRangeModel.startDate; this.config.endDate = dateRangeModel.endDate; if (this.config.timePicker) { - // this.state.sides.forEach((side) => { - // this.state.times[side] = this.generateTimePicker(null, side); - // }) - if (this.config.timePicker) { - this.state.times = {}; - } - this.updateCalendar(); + this.state.times = {}; } this.setActiveItemOnRangeClick(); } @@ -506,6 +502,7 @@ export class NgxDatetimeRangePickerComponent implements OnChanges { this.sanitizeDates(); this.processRanges(); this.doDateRangeModelChange(); + this.updateCalendar(); } selectTimeZone() { @@ -674,9 +671,7 @@ export class NgxDatetimeRangePickerComponent implements OnChanges { processRanges() { if (this.config.showRanges && !this.config.singleDatePicker) { - if (isEmpty(this.config.availableRanges)) { - this.config.availableRanges = this.service.createDefaultRanges(this.config); - } + this.config.availableRanges = this.service.createDefaultRanges(this.config); this.selectActiveRange(); } else { this.state.activeRange = "Custom Range"; @@ -1078,8 +1073,8 @@ export class NgxDatetimeRangePickerComponent implements OnChanges { endDate.rowItemText = `Quarter ${moment(endDate.firstDay, DEFAULT_DATE_FORMAT).quarter()}`; } - this.state.activeItem.left = startDate; - this.state.activeItem.right = endDate; + Object.assign(this.state.activeItem.left, startDate); + Object.assign(this.state.activeItem.right, endDate); // this.doApply(); } diff --git a/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.service.ts b/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.service.ts index f44dc36..d46c022 100644 --- a/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.service.ts +++ b/projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.service.ts @@ -78,7 +78,7 @@ export class NgxDatetimeRangePickerService { singleDatePicker: false, componentDisabled: false, placeholder: "Select Date", - showRowNumber: true, + showRowNumber: false, availableRanges: {}, showRanges: true, disableWeekends: false, @@ -795,4 +795,24 @@ export class NgxDatetimeRangePickerService { return { available, inRange, active, today }; } + + getLabelProps( + state: State, + calendarType: string, + side: string + ): { label: string; labelFormat: string; type: string } { + let label: string, labelFormat: string, type: string; + + if (calendarType === "daily") { + label = `${state.selectedMonth[side]} ${state.selectedYear[side]}`; + labelFormat = "MMM YYYY"; + type = "month"; + } else { + label = `${state.selectedYear[side]}`; + labelFormat = "YYYY"; + type = "year"; + } + + return { label, labelFormat, type }; + } } diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e200145..6c89cfa 100755 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -19,7 +19,6 @@ .filter-container { width: 100%; border-radius: 0; - background-color: #f9f9f9; padding: 15px 15px 3px; margin-bottom: 20px; display: inline-block; diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b0e98ac..543e416 100755 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -85,7 +85,8 @@ export class AppComponent { type: this.selectedOption, viewDateFormat: "MMM D, YYYY", placeholder: "Date", - inputDateFormat: "YYYY-MM-DD" + inputDateFormat: "YYYY-MM-DD", + showRowNumber: true }; }