feat(ui5-datepicker): Add property to hide week numbers (#1955)

Add new property to DatePicker, Calendar and DayPicker, called "hideWeekNumbers' to optionally hide the weeks numbers column. (In classic UI5 there is property "showWeekNumbers, default: true" in the Calendar, but not in the DatePicker).
Note: For calendars other than Gregorian, the week numbers are not displayed regardless of what is set.

Fixes: #1949

Author: ilhan007

packages/main/src/Calendar.hbs

@@ -26,6 +26,7 @@
 			timestamp="{{_oMonth.timestamp}}"
 			@ui5-change="{{_oMonth.onSelectedDatesChange}}"
 			@ui5-navigate="{{_oMonth.onNavigate}}"
+			?hide-week-numbers="{{hideWeekNumbers}}"
 		></ui5-daypicker>
 
 		<ui5-monthpicker

packages/main/src/Calendar.js

@@ -82,6 +82,22 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the visibility of the week numbers column.
+		 * <br><br>
+		 *
+		 * <b>Note:<b> For calendars other than Gregorian,
+		 * the week numbers are not displayed regardless of what is set.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.0.0-rc.8
+		 */
+		hideWeekNumbers: {
+			type: Boolean,
+		},
+
 		_header: {
 			type: Object,
 		},

packages/main/src/DatePicker.js

@@ -188,6 +188,22 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the visibility of the week numbers column.
+		 * <br><br>
+		 *
+		 * <b>Note:<b> For calendars other than Gregorian,
+		 * the week numbers are not displayed regardless of what is set.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.0.0-rc.8
+		 */
+		hideWeekNumbers: {
+			type: Boolean,
+		},
+
 		_isPickerOpen: {
 			type: Boolean,
 			noAttribute: true,

packages/main/src/DatePickerPopover.hbs

@@ -48,6 +48,7 @@
 		.minDate="{{_calendar.minDate}}"
 		.maxDate="{{_calendar.maxDate}}"
 		@ui5-selected-dates-change="{{_calendar.onSelectedDatesChange}}"
+		?hide-week-numbers="{{hideWeekNumbers}}"
 	></ui5-calendar>
 {{/inline}}
 

packages/main/src/DayPicker.hbs

@@ -6,15 +6,15 @@
 	@mouseup={{_onmouseup}}
 >
 
-	{{#if showWeekNumbers}}
+	{{#unless _hideWeekNumbers}}
 		<div class="ui5-dp-weeknumber-container">
 			{{#each _weekNumbers}}
 				<div class="ui5-dp-weekname-container">
 					<span class="ui5-dp-weekname">{{this}}</span>
 				</div>
 			{{/each}}
 		</div>
-	{{/if}}
+	{{/unless}}
 
 	<div id="{{_id}}-content" class="ui5-dp-content">
 		<div role="row" class="ui5-dp-days-names-container">

packages/main/src/DayPicker.js

@@ -88,29 +88,69 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Determines the format, displayed in the input field.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		formatPattern: {
+			type: String,
+		},
+
+		/**
+		 * Defines the visibility of the week numbers column.
+		 * <br><br>
+		 *
+		 * <b>Note:<b> For calendars other than Gregorian,
+		 * the week numbers are not displayed regardless of what is set.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.0.0-rc.8
+		 */
+		hideWeekNumbers: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines the effective weeks numbers visibility,
+		 * based on the <code>primaryCalendarType</code> and <code>hideWeekNumbers</code> property.
+		 * @type {boolean}
+		 * @private
+		 */
+		_hideWeekNumbers: {
+			type: Boolean,
+		},
+
+		/**
+		 * @type {Object}
+		 * @private
+		 */
 		_weeks: {
 			type: Object,
 			multiple: true,
 		},
 
+		/**
+		 * @type {Object}
+		 * @private
+		 */
 		_weekNumbers: {
 			type: Object,
 			multiple: true,
 		},
+
+		/**
+		 * @type {boolean}
+		 * @private
+		 */
 		_hidden: {
 			type: Boolean,
 			noAttribute: true,
 		},
-		/**
-		 * Determines the format, displayed in the input field.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		formatPattern: {
-			type: String,
-		},
 	},
 	events: /** @lends  sap.ui.webcomponents.main.DayPicker.prototype */ {
 		/**
@@ -314,6 +354,7 @@ class DayPicker extends UI5Element {
 		}
 
 		this._dayNames[0].classes += " ui5-dp-firstday";
+		this._hideWeekNumbers = this.shouldHideWeekNumbers;
 	}
 
 	onAfterRendering() {
@@ -400,8 +441,12 @@ class DayPicker extends UI5Element {
 		}
 	}
 
-	get showWeekNumbers() {
-		return this.primaryCalendarType === CalendarType.Gregorian;
+	get shouldHideWeekNumbers() {
+		if (this._primaryCalendarType !== CalendarType.Gregorian) {
+			return true;
+		}
+
+		return this.hideWeekNumbers;
 	}
 
 	get _timestamp() {

packages/main/src/themes/DayPicker.css

@@ -8,6 +8,10 @@
 	width: 100%;
 }
 
+:host([_hide-week-numbers]) .ui5-dp-content {
+	flex-basis: 100%;
+}
+
 .ui5-dp-weekname,
 .ui5-dp-dayname,
 .ui5-dp-item {

packages/main/test/pageobjects/DatePickerTestPage.js

@@ -69,6 +69,10 @@ class DatePickerTestPage {
 		return browser.$(`.${this.staticAreaItemClassName}`).shadow$("ui5-calendar").shadow$(`ui5-calendar-header`).shadow$(`div[data-sap-show-picker="Month"]`);
 	}
 
+	get dayPicker() {
+		return browser.$(`.${this.staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`);
+	}
+
 	getPickerDate(timestamp) {
 		return browser.$(`.${this.staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`).shadow$(`div[data-sap-timestamp="${timestamp}"]`);
 	}

packages/main/test/pages/DatePicker_test_page.html

@@ -60,13 +60,15 @@ <h3>Test placeholder</h3>
 	<ui5-date-picker id="dp15" format-pattern="MMM d, y" placeholder="Delivery date"></ui5-date-picker>
 
 	<h3>DatePicker with valueStateMessage</h3>
-		<ui5-date-picker
-		id="dp17"
-		value-state="Error">
-			<div slot="valueStateMessage" id="coolValueStateMessage">
-				This date is wrong
-			</div>
-		</ui5-date-picker>
+	<ui5-date-picker id="dp17" value-state="Error">
+		<div slot="valueStateMessage" id="coolValueStateMessage">
+			This date is wrong
+		</div>
+	</ui5-date-picker>
+
+	<h3>DatePicker with hide-week-numbers=true/false</h3>
+	<ui5-date-picker id="dp18"></ui5-date-picker>
+	<ui5-date-picker id="dp19" hide-week-numbers></ui5-date-picker>
 
 	<script>
 		var originalGetDate = Date.prototype.getDate;

packages/main/test/specs/DatePicker.spec.js

@@ -691,4 +691,30 @@ describe("Date Picker Tests", () => {
 		datepicker.openPicker({ focusInput: false });
 		assert.ok(datepicker.getDisplayedDay(14).isFocusedDeep(), "Days out of range are disabled");
 	});
+
+	it("Tests week numbers column visibility", () => {
+		// act
+		datepicker.id = "#dp18";
+		datepicker.valueHelpIcon.click()
+
+		// assert
+		const weekNumbersCol1 = datepicker.dayPicker.shadow$(".ui5-dp-weeknumber-container");
+		assert.equal(weekNumbersCol1.isExisting(), true, "The week numbers column is visible.");
+
+		// close date picker
+		datepicker.innerInput.click();
+		browser.keys(["Alt", "ArrowUp", "NULL"]);
+
+		// act
+		datepicker.id = "#dp19";
+		datepicker.valueHelpIcon.click()
+
+		// assert
+		const weekNumbersCol2 = datepicker.dayPicker.shadow$(".ui5-dp-weeknumber-container");
+		assert.equal(weekNumbersCol2.isExisting(), false, "The week numbers column is hidden.");
+
+		// close date picker
+		datepicker.innerInput.click();
+		browser.keys(["Alt", "ArrowUp", "NULL"]);
+	});
 });