fix(ui5-datepicker): it is now possible to set an empty placeholder (#997)

Author: vladitasev

packages/base/src/UI5Element.js

@@ -636,7 +636,7 @@ class UI5Element extends HTMLElement {
 			} else if (propType === Object) {
 				defaultState[propName] = "defaultValue" in props[propName] ? props[propName].defaultValue : {};
 			} else if (propType === String) {
-				defaultState[propName] = propDefaultValue || "";
+				defaultState[propName] = "defaultValue" in props[propName] ? props[propName].defaultValue : "";
 			} else {
 				defaultState[propName] = propDefaultValue;
 			}
@@ -678,7 +678,7 @@ class UI5Element extends HTMLElement {
 					if (propData.type === Boolean) {
 						return false;
 					} else if (propData.type === String) {  // eslint-disable-line
-						return propDefaultValue || "";
+						return propDefaultValue;
 					} else if (propData.multiple) { // eslint-disable-line
 						return [];
 					} else {

packages/main/src/DatePicker.js

@@ -112,12 +112,15 @@ const metadata = {
 		 * <code>ui5-datepicker</code> has no value.
 		 *
 		 * <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder.
+		 * Passing an empty string as the value of this property will make the <code>ui5-datepicker</code> appear empty - without placeholder or format pattern.
+		 *
 		 * @type {string}
-		 * @defaultvalue ""
+		 * @defaultvalue undefined
 		 * @public
 		 */
 		placeholder: {
 			type: String,
+			defaultValue: undefined,
 		},
 
 		/**
@@ -391,7 +394,7 @@ class DatePicker extends UI5Element {
 	}
 
 	get _placeholder() {
-		return this.placeholder || this._displayFormat;
+		return this.placeholder !== undefined ? this.placeholder : this._displayFormat;
 	}
 
 	getFormat() {

packages/main/test/pages/DatePicker.html

@@ -78,6 +78,9 @@ <h3>buddhist calendar type</h3>
 
 		<h3>japanese calendar type</h3>
 		<ui5-datepicker primary-calendar-type='Japanese'></ui5-datepicker>
+
+        <h3>explicitly set empty placeholder</h3>
+        <ui5-datepicker placeholder=""></ui5-datepicker>
 	</div>
 	<script>
 		var dp = document.getElementById('dp5');