fix(ui5-datepicker): display extreme values correctly

Fixes #26

packages/base/src/sap/ui/webcomponents/base/delegate/ItemNavigation.js

@@ -139,6 +139,10 @@ class ItemNavigation extends EventProvider {
 			this.currentIndex -= this.rowSize;
 		}
 
+		if (this.currentIndex < 0) {
+			this.currentIndex = 0;
+		}
+
 		const currentItem = items[this.currentIndex];
 
 		if (currentItem instanceof WebComponent) {

packages/main/src/Calendar.js

@@ -303,6 +303,10 @@ class Calendar extends WebComponent {
 		nextMonth.setDate(1);
 		nextMonth.setMonth(nextMonth.getMonth() + 1);
 
+		if (nextMonth.getYear() > 9999) {
+			return;
+		}
+
 		this._focusFirstDayOfMonth(nextMonth);
 		this.timestamp = nextMonth.valueOf() / 1000;
 	}
@@ -333,14 +337,16 @@ class Calendar extends WebComponent {
 
 		const weekDaysCount = 7;
 
-		// find the DOM for the last day index
-		const lastDay = dayPicker.shadowRoot.querySelector(".sapWCDayPickerItemsContainer").children[parseInt(lastDayOfMonthIndex / weekDaysCount)].children[(lastDayOfMonthIndex % weekDaysCount)];
+		if (lastDayOfMonthIndex !== -1) {
+			// find the DOM for the last day index
+			const lastDay = dayPicker.shadowRoot.querySelector(".sapWCDayPickerItemsContainer").children[parseInt(lastDayOfMonthIndex / weekDaysCount)].children[(lastDayOfMonthIndex % weekDaysCount)];
 
-		// update current item in ItemNavigation
-		dayPicker._itemNav.current = lastDayOfMonthIndex;
+			// update current item in ItemNavigation
+			dayPicker._itemNav.current = lastDayOfMonthIndex;
 
-		// focus the item
-		lastDay.focus();
+			// focus the item
+			lastDay.focus();
+		}
 
 		if (iNewMonth > 11) {
 			iNewMonth = 0;
@@ -356,24 +362,46 @@ class Calendar extends WebComponent {
 		oNewDate.setYear(iNewYear);
 		oNewDate.setMonth(iNewMonth);
 
+
+		if (oNewDate.getYear() < 1) {
+			return;
+		}
 		this.timestamp = oNewDate.valueOf() / 1000;
 	}
 
 	_showNextYear() {
+		if (this._calendarDate.getYear() === 9999) {
+			return;
+		}
+
 		const oNewDate = this._calendarDate;
 		oNewDate.setYear(this._calendarDate.getYear() + 1);
 
 		this.timestamp = oNewDate.valueOf() / 1000;
 	}
 
 	_showPrevYear() {
+		if (this._calendarDate.getYear() === 1) {
+			return;
+		}
+
 		const oNewDate = this._calendarDate;
 		oNewDate.setYear(this._calendarDate.getYear() - 1);
 
 		this.timestamp = oNewDate.valueOf() / 1000;
 	}
 
 	_showNextPageYears() {
+		if (this._yearPicker.timestamp) {
+			const oCalDate = CalendarDate.fromTimestamp((this._yearPicker.timestamp + (31536000 * 20)) * 1000, this._primaryCalendarType);
+			oCalDate.setMonth(0);
+			oCalDate.setDate(1);
+			oCalDate.setYear(oCalDate.getYear() - 8);
+			if (oCalDate.getYear() > 9998) {
+				return;
+			}
+		}
+
 		this._yearPicker = Object.assign({}, this._yearPicker, {
 			// add 20 years to the timestamp of the monthpicker
 			timestamp: this._yearPicker.timestamp + (31536000 * 20),
@@ -383,6 +411,16 @@ class Calendar extends WebComponent {
 	}
 
 	_showPrevPageYears() {
+		if (this._yearPicker.timestamp) {
+			const oCalDate = CalendarDate.fromTimestamp(this._yearPicker.timestamp * 1000, this._primaryCalendarType);
+			oCalDate.setMonth(0);
+			oCalDate.setDate(1);
+			oCalDate.setYear(oCalDate.getYear() - 8);
+			if (oCalDate.getYear() < 1) {
+				return;
+			}
+		}
+
 		this._yearPicker = Object.assign({}, this._yearPicker, {
 			// subtracts 20 years from the timestamp of the monthpicker
 			timestamp: this._yearPicker.timestamp - (31536000 * 20),

packages/main/src/DatePicker.js

@@ -464,6 +464,11 @@ class DatePicker extends WebComponent {
 	}
 
 	_changeCalendarSelection() {
+		if (this._calendarDate.getYear() < 1) {
+			// 0 is a valid year, but we cannot display it
+			return;
+		}
+
 		const oCalDate = this._calendarDate;
 		const timestamp = oCalDate.valueOf() / 1000;
 

packages/main/src/DayPicker.hbs

@@ -22,25 +22,29 @@
 		</div>
 		<div id="{{ctr._id}}-days" class="sapWCDayPickerItemsContainer" tabindex="-1">
 			{{#each ctr._weeks}}
-				<div style="display: flex;">
-					{{#each this}}
-						<div
-							id="{{this.id}}"
-							tabindex="{{this._tabIndex}}"
-							data-sap-timestamp="{{this.timestamp}}"
-							data-sap-index="{{this._index}}"
-							role="gridcell"
-							aria-selected="{{this.selected}}"
-							class="{{this.classes}} sapWCDayPickerDay">
-								<span 
-									class="sapWCDayPickerDayText"
-									data-sap-timestamp="{{this.timestamp}}"
-									data-sap-index="{{this._index}}">
-										{{this.iDay}}
-								</span>
-						</div>
-					{{/each}}
-				</div>
+				{{#if this.length}}
+					<div style="display: flex;">
+						{{#each this}}
+							<div
+								id="{{this.id}}"
+								tabindex="{{this._tabIndex}}"
+								data-sap-timestamp="{{this.timestamp}}"
+								data-sap-index="{{this._index}}"
+								role="gridcell"
+								aria-selected="{{this.selected}}"
+								class="{{this.classes}} sapWCDayPickerDay">
+									<span 
+										class="sapWCDayPickerDayText"
+										data-sap-timestamp="{{this.timestamp}}"
+										data-sap-index="{{this._index}}">
+											{{this.iDay}}
+									</span>
+							</div>
+						{{/each}}
+					</div>
+				{{else}}
+					<div class="sapWCEmptyWeek"></div>
+				{{/if}}
 			{{/each}}
 		</div>
 	</div>

packages/main/src/DayPicker.js

@@ -164,7 +164,7 @@ class DayPicker extends WebComponent {
 					return d === timestamp;
 				}),
 				iDay: oCalDate.getDate(),
-				_index: i,
+				_index: i.toString(),
 				classes: `sapWCDayPickerItem sapWCDayPickerWDay${weekday}`,
 			};
 
@@ -206,11 +206,16 @@ class DayPicker extends WebComponent {
 				day.classes += " sapWCDayPickerItemWeekEnd";
 			}
 
-			if (day.classes.indexOf("sapWCDayPickerWDay6") !== -1) {
+			if (day.classes.indexOf("sapWCDayPickerWDay6") !== -1
+				|| _aVisibleDays.length - 1 === i) {
 				this._weeks.push(week);
 				week = [];
 			}
 		}
+
+		while (this._weeks.length < 6) {
+			this._weeks.push([]);
+		}
 		/* eslint-enable no-loop-func */
 
 		if (!isDaySelected && todayIndex && this._itemNav.current === 0) {
@@ -339,6 +344,10 @@ class DayPicker extends WebComponent {
 		oNewDate.setYear(iNewYear);
 		oNewDate.setMonth(iNewMonth);
 
+		if (oNewDate.getYear() < 1 || oNewDate.getYear() > 9999) {
+			return;
+		}
+
 		this.fireEvent("navigate", { timestamp: (oNewDate.valueOf() / 1000) });
 	}
 

packages/main/src/YearPicker.hbs

@@ -6,17 +6,21 @@
 	style="{{styles.main}}"
 >
 	{{#each ctr._yearIntervals}}
-		<div class="{{../../classes.yearInterval}}">
-			{{#each this}}
-				<div id="{{this.id}}"
-					tabindex="{{this._tabIndex}}"
-					data-sap-timestamp="{{this.timestamp}}"
-					class="{{this.classes}}"
-					role="gridcell"
-					aria-selected="false">
-						{{this.year}}
-				</div>
-			{{/each}}
-		</div>
+		{{#if this.length}}
+			<div class="{{../../classes.yearInterval}}">
+				{{#each this}}
+					<div id="{{this.id}}"
+						tabindex="{{this._tabIndex}}"
+						data-sap-timestamp="{{this.timestamp}}"
+						class="{{this.classes}}"
+						role="gridcell"
+						aria-selected="false">
+							{{this.year}}
+					</div>
+				{{/each}}
+			</div>
+		{{else}}
+			<span class="sapWCEmptyYearRow"></span>
+		{{/if}}
 	{{/each}}
 </div>

packages/main/src/YearPicker.js

@@ -126,7 +126,17 @@ class YearPicker extends WebComponent {
 		}
 
 		for (let i = 0; i < ITEMS_COUNT; i++) {
+			const intervalIndex = parseInt(i / 4);
+			if (!intervals[intervalIndex]) {
+				intervals[intervalIndex] = [];
+			};
+
 			oCalDate.setYear(oCalDate.getYear() + 1);
+
+			if (oCalDate.getYear() < 1 || oCalDate.getYear() > 9999) {
+				continue;
+			}
+
 			timestamp = oCalDate.valueOf() / 1000;
 
 			const year = {
@@ -140,12 +150,8 @@ class YearPicker extends WebComponent {
 				year.classes += " sapWCYearPickerItemSel";
 			}
 
-			const intervalIndex = parseInt(i / 4);
-
 			if (intervals[intervalIndex]) {
 				intervals[intervalIndex].push(year);
-			} else {
-				intervals[intervalIndex] = [year];
 			}
 		}
 
@@ -229,9 +235,16 @@ class YearPicker extends WebComponent {
 		if (event.end) {
 			oCalDate.setYear(oCalDate.getYear() + ITEMS_COUNT);
 		} else if (event.start) {
+			if (oCalDate.getYear() - MIDDLE_ITEM_INDEX < 1) {
+				return;
+			}
 			oCalDate.setYear(oCalDate.getYear() - ITEMS_COUNT);
 		}
 
+		if (oCalDate.getYear() - MIDDLE_ITEM_INDEX > 9999) {
+			return;
+		}
+
 		this.timestamp = oCalDate.valueOf() / 1000;
 	}
 }

packages/main/src/themes/base/DayPicker.less

@@ -165,6 +165,13 @@ ui5-daypicker {
 
 .sapWCDayPickerItemsContainer {
 	outline: none;
+	& > :first-child {
+		justify-content: flex-end;
+	}
+}
+
+.sapWCEmptyWeek {
+	height: 3rem;
 }
 
 .sapUiSizeCompact {
@@ -182,4 +189,8 @@ ui5-daypicker {
 		margin-top: 2px;
 		margin-right: 2px;
 	}
+
+	& .sapWCEmptyWeek {
+		height: 2.125rem;
+	}
 }

packages/main/src/themes/base/YearPicker.less

@@ -35,6 +35,18 @@ ui5-yearpicker {
 	width: 100%;
 }
 
+.sapWCYearPickerIntervalContainer:last-of-type {
+	justify-content: flex-start;
+}
+
+.sapWCYearPickerIntervalContainer:first-of-type {
+	justify-content: flex-end;
+}
+
+.sapWCEmptyYearRow {
+	height: 3rem;
+}
+
 .sapWCYearPickerItem {
 	display: flex;
 	margin: 1px;
@@ -89,4 +101,7 @@ ui5-yearpicker {
 	& .sapWCYearPickerItem {
 		height: 2rem;
 	}
+	& .sapWCEmptyYearRow {
+		height: 2.125rem;
+	}
 }