@elyra/canvas 12.27.1 → 12.28.1

package/src/common-properties/controls/textfield/textfield.jsx

@@ -24,10 +24,11 @@ import * as ControlUtils from "./../../util/control-utils";
 import { formatMessage } from "./../../util/property-utils";
 import { STATES } from "./../../constants/constants.js";
 import { CONDITION_MESSAGE_TYPE, MESSAGE_KEYS, TRUNCATE_LIMIT } from "./../../constants/constants.js";
-import Tooltip from "./../../../tooltip/tooltip.jsx";
+import TruncatedContentTooltip from "./../../components/truncated-content-tooltip";
 import classNames from "classnames";
 import { v4 as uuid4 } from "uuid";
 
+
 const arrayValueDelimiter = ", ";
 
 class TextfieldControl extends React.Component {
@@ -35,7 +36,8 @@ class TextfieldControl extends React.Component {
 		super(props);
 		this.reactIntl = props.controller.getReactIntl();
 		this.charLimit = ControlUtils.getCharLimit(props.control, props.controller.getMaxLengthForSingleLineControls());
-		this.id = ControlUtils.getControlId(props.propertyId);
+		this.uuid = uuid4();
+		this.id = ControlUtils.getControlId(props.propertyId, this.uuid);
 		this.isList = false;
 		if (this.props.control.valueDef) {
 			if (this.props.control.valueDef.isList) {
@@ -104,30 +106,26 @@ class TextfieldControl extends React.Component {
 				labelText={this.props.controlItem}
 				hideLabel={this.props.tableControl}
 				light={this.props.controller.getLight() && this.props.control.light}
+				ref={(ref) => (this.textInputRef = ref)}
 			/>);
 		}
 
 		let display = textInput;
 		if (this.props.tableControl) {
-			const tooltipId = uuid4() + "-tooltip-column-" + this.props.propertyId.toString();
+			const tooltipProps = {};
+			if (this.textInputRef) {
+				tooltipProps.truncatedRef = this.textInputRef;
+			}
 			let disabled = true;
 			if (value && this.props.state !== STATES.DISABLED) {
 				disabled = false;
 			}
-			const tooltip = (
-				<div className="properties-tooltips">
-					{String(value)}
-				</div>
-			);
-			display = (<Tooltip
-				id={tooltipId}
-				tip={tooltip}
-				direction="bottom"
-				className="properties-tooltips"
-				disable={disabled}
-			>
-				{textInput}
-			</Tooltip>);
+			display = (<TruncatedContentTooltip
+				{...tooltipProps}
+				content={textInput}
+				tooltipText={value}
+				disabled={disabled}
+			/>);
 		}
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>

package/src/common-properties/controls/textfield/textfield.scss

@@ -39,6 +39,7 @@ $textinput-bottom-padding: 5px;
 			margin: 0;
 			padding: 0;
 			height: 1.72rem;
+			text-overflow: ellipsis;
 			&:focus {
 				border-top: 0;
 				border-right: 0;

package/src/common-properties/form/EditorForm.js

@@ -490,7 +490,11 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 			break;
 		case Type.DATE:
 			role = Type.DATE;
-			if (parameter.isList()) {
+			if (parameter.control === ControlType.DATEPICKER) {
+				controlType = ControlType.DATEPICKER;
+			} else if (parameter.control === ControlType.DATEPICKERRANGE) {
+				controlType = ControlType.DATEPICKERRANGE;
+			} else if (parameter.isList()) {
 				controlType = ControlType.TEXTAREA;
 			} else {
 				controlType = ControlType.DATEFIELD;

package/src/common-properties/form/Form.js

@@ -20,7 +20,6 @@ import { makePrimaryTab } from "./EditorForm";
 import { UIItem } from "./UIItem";
 import { L10nProvider } from "../util/L10nProvider";
 import { translateMessages } from "./Conditions";
-import { convertValueDataTypes } from "../util/property-utils";
 import { Size } from "../constants/form-constants";
 import { CONTAINER_TYPE } from "../constants/constants";
 
@@ -45,9 +44,8 @@ export default class Form {
 	* Returns a new Form
 	* @param paramDef Parameter definition
 	* @param containerType Type of container common properties will be displayed in, set in propertiesConfig
-	* @param shouldConvertValueDataTypes Boolean, if true, convert the currentParameters values into the type defined in parameterDef
 	*/
-	static makeForm(paramDef, containerType, shouldConvertValueDataTypes) {
+	static makeForm(paramDef, containerType) {
 		const propDef = PropertyDef.makePropertyDef(propertyOf(paramDef)("titleDefinition"), propertyOf(paramDef)("parameters"), propertyOf(paramDef)("complex_types"),
 			propertyOf(paramDef)("uihints"));
 		const resources = propertyOf(paramDef)("resources");
@@ -61,11 +59,7 @@ export default class Form {
 				}
 			}
 
-			let currentParameters = propertyOf(paramDef)("current_parameters");
-			if (shouldConvertValueDataTypes) {
-				currentParameters = convertValueDataTypes(currentParameters, propDef.parameterMetadata.paramDefs);
-			}
-
+			const currentParameters = propertyOf(paramDef)("current_parameters");
 			const data = {
 				currentParameters: currentParameters,
 				uiCurrentParameters: propertyOf(paramDef)("current_ui_parameters"),

package/src/common-properties/panels/sub-panel/cell.jsx

@@ -18,7 +18,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Button } from "carbon-components-react";
 import { Settings16 } from "@carbon/icons-react";
-import { v4 as uuid4 } from "uuid";
 import { formatMessage } from "./../../util/property-utils";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
 import { cloneDeep } from "lodash";
@@ -68,7 +67,7 @@ export default class SubPanelCell extends React.Component {
 				controller={this.props.controller}
 			>
 				<Tooltip
-					id={uuid4() + "-" + tooltipId}
+					id={tooltipId}
 					tip={subPanelToolTip}
 					direction="left"
 					className="properties-tooltips icon-tooltip"

package/src/common-properties/panels/summary/summary.jsx

@@ -27,12 +27,12 @@ import { isEmpty } from "lodash";
 import * as PropertyUtils from "./../../util/property-utils";
 import * as ControlUtils from "./../../util/control-utils";
 import { MESSAGE_KEYS, CONDITION_MESSAGE_TYPE } from "./../../constants/constants";
-import { v4 as uuid4 } from "uuid";
 import { STATES } from "./../../constants/constants.js";
 import { Type, ParamRole } from "./../../constants/form-constants.js";
 import classNames from "classnames";
 
 import Tooltip from "./../../../tooltip/tooltip.jsx";
+import TruncatedContentTooltip from "../../components/truncated-content-tooltip";
 
 class SummaryPanel extends React.Component {
 	constructor(props) {
@@ -45,9 +45,6 @@ class SummaryPanel extends React.Component {
 		this.cancelWideFlyout = this.cancelWideFlyout.bind(this);
 		this._getSummaryTables = this._getSummaryTables.bind(this);
 	}
-	_onMouseMove(evt) {
-		this.setState({ mousePos: { x: evt.clientX, y: evt.clientY } });
-	}
 
 	hideWideFlyout() {
 		this.props.controller.setIsSummaryPanelShowing(false);
@@ -137,11 +134,12 @@ class SummaryPanel extends React.Component {
 									<td key={"summary-table-data-" + colIdx}
 										className={"properties-summary-row-data "}
 										style={{ width: colWidth }}
-										onMouseMove={this._onMouseMove.bind(this)}
 									>
-										<Tooltip id={uuid4()} tip={contentValue} mousePos={this.state.mousePos} showToolTipIfTruncated>
-											<span id={"span_" + uuid4()}>{contentValue}</span>
-										</Tooltip>
+										<TruncatedContentTooltip
+											content={<span>{contentValue}</span>}
+											tooltipText={contentValue}
+											disabled={false}
+										/>
 									</td>);
 							}
 						}
@@ -149,9 +147,11 @@ class SummaryPanel extends React.Component {
 						const displayValue = this._getSummaryDisplayValue(rowValue, propertyId);
 						rowData.push(
 							<td key={"summary-table-row-data-" + rowIdx} className={"properties-summary-row-data "}>
-								<Tooltip id={uuid4()} tip={displayValue} mousePos={this.state.mousePos} showToolTipIfTruncated>
-									<span id={"span_" + uuid4()}>{displayValue}</span>
-								</Tooltip>
+								<TruncatedContentTooltip
+									content={<span>{displayValue}</span>}
+									tooltipText={displayValue}
+									disabled={false}
+								/>
 							</td>);
 					}
 					if (rowData.length > 0) {
@@ -264,7 +264,7 @@ class SummaryPanel extends React.Component {
 
 			return (
 				<Tooltip
-					id= {uuid4() + "summary-icon"}
+					id= "summary-icon"
 					tip={descriptionText}
 					className="properties-tooltips"
 				>

package/src/common-properties/panels/summary/summary.scss

@@ -56,17 +56,11 @@
 	margin-bottom: $spacing-05;
 }
 
-.properties-summary-row-data > .tooltip-container {
-	margin: 1px 0;
-	> div:first-child {
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		overflow: hidden;
-	}
-}
-
 .properties-summary-row {
 	display: flex;
-	justify-content: space-between;
 	padding: 2px 0;
+	span {
+		cursor: text;
+		user-select: text;
+	}
 }

package/src/common-properties/properties-controller.js

@@ -27,11 +27,11 @@ import * as PropertyUtils from "./util/property-utils.js";
 import { STATES, ACTIONS, CONDITION_TYPE, PANEL_TREE_ROOT, CONDITION_MESSAGE_TYPE, UPDATE_TYPE } from "./constants/constants.js";
 import CommandStack from "../command-stack/command-stack.js";
 import ControlFactory from "./controls/control-factory";
-import { Type, ParamRole, ControlType } from "./constants/form-constants";
+import { Type, ParamRole, ControlType, ItemType } from "./constants/form-constants";
 import { has, cloneDeep, assign, isEmpty, isEqual, isUndefined, get } from "lodash";
 import Form from "./form/Form";
 import { getConditionOps } from "./ui-conditions/condition-ops/condition-ops";
-import { ItemType } from "./constants/form-constants";
+import { DEFAULT_LOCALE } from "./constants/constants";
 export default class PropertiesController {
 
 	constructor() {
@@ -126,6 +126,10 @@ export default class PropertiesController {
 		return this.propertiesConfig;
 	}
 
+	getLocale() {
+		return get(this.propertiesConfig, "locale", DEFAULT_LOCALE);
+	}
+
 	isTearsheetContainer() {
 		return this.propertiesConfig.containerType === "Tearsheet";
 	}
@@ -1153,15 +1157,16 @@ export default class PropertiesController {
 	getPropertyValues(options) {
 		const propertyValues = this.propertiesStore.getPropertyValues();
 		let returnValues = propertyValues;
-		if (options && (options.filterHiddenDisabled || options.filterHidden || options.filterDisabled || options.filterHiddenControls)) {
+		if (options && (options.filterHiddenDisabled || options.filterHidden || options.filterDisabled || options.filterHiddenControls || options.valueFilters)) {
 			const filteredValues = {};
 			for (const propKey in propertyValues) {
 				if (!has(propertyValues, propKey)) {
 					continue;
 				}
 				const filteredValue = this.getPropertyValue({ name: propKey }, options);
-				// only set parameters with values
-				if (typeof filteredValue !== "undefined") {
+				// only set parameters with values or filter out values specified in config
+				const valueFilters = Array.isArray(options.valueFilters) ? options.valueFilters : [];
+				if (typeof filteredValue !== "undefined" && !valueFilters.includes(filteredValue)) {
 					filteredValues[propKey] = filteredValue;
 				}
 			}
@@ -1185,7 +1190,7 @@ export default class PropertiesController {
 	}
 
 	setPropertyValues(values, isInitProps) {
-		const inValues = cloneDeep(values);
+		let inValues = cloneDeep(values);
 
 		// convert currentParameters of type:object to array values
 		if (values) {
@@ -1198,6 +1203,10 @@ export default class PropertiesController {
 					inValues[propertyName] = convertedValues;
 				}
 			});
+
+			if (get(this.getPropertiesConfig(), "convertValueDataTypes")) {
+				inValues = PropertyUtils.convertValueDataTypes(inValues, controls);
+			}
 		}
 
 		this.propertiesStore.setPropertyValues(inValues);

package/src/common-properties/properties-main/properties-main.jsx

@@ -123,6 +123,10 @@ class PropertiesMain extends React.Component {
 				}
 			}
 		}
+
+		if (newProps.propertiesConfig && !isEqual(newProps.propertiesConfig, this.propertiesController.getPropertiesConfig())) {
+			this.propertiesController.setPropertiesConfig(newProps.propertiesConfig);
+		}
 	}
 
 	onBlur(e) {
@@ -144,7 +148,7 @@ class PropertiesMain extends React.Component {
 			if (this.props.propertiesConfig.schemaValidation) {
 				validateParameterDefAgainstSchema(propertiesInfo.parameterDef);
 			}
-			formData = Form.makeForm(propertiesInfo.parameterDef, this.props.propertiesConfig.containerType, this.props.propertiesConfig.convertValueDataTypes);
+			formData = Form.makeForm(propertiesInfo.parameterDef, this.props.propertiesConfig.containerType);
 		}
 		// TODO: This can be removed once the WML Play service generates datasetMetadata instead of inputDataModel
 		if (formData && formData.data && formData.data.inputDataModel && !formData.data.datasetMetadata) {
@@ -333,7 +337,9 @@ class PropertiesMain extends React.Component {
 	_setValueInforProperties(valueInfo, options) {
 		const applyProperties = options && options.applyProperties === true;
 		const filterHiddenDisabled = this.props.propertiesConfig.conditionReturnValueHandling === CONDITION_RETURN_VALUE_HANDLING.NULL;
-		const properties = this.propertiesController.getPropertyValues({ filterHiddenDisabled: filterHiddenDisabled, applyProperties: applyProperties });
+
+		const properties = this.propertiesController.getPropertyValues({ filterHiddenDisabled: filterHiddenDisabled, applyProperties: applyProperties,
+			valueFilters: this.props.propertiesConfig.returnValueFiltering });
 		if (this.uiParameterKeys.length > 0) {
 			valueInfo.properties = omit(properties, this.uiParameterKeys);
 			valueInfo.uiProperties = pick(properties, this.uiParameterKeys);
@@ -603,6 +609,7 @@ PropertiesMain.propTypes = {
 		containerType: PropTypes.string,
 		enableResize: PropTypes.bool,
 		conditionReturnValueHandling: PropTypes.string,
+		returnValueFiltering: PropTypes.array,
 		heading: PropTypes.bool,
 		buttonLabels: PropTypes.shape({
 			primary: PropTypes.string,
@@ -615,7 +622,8 @@ PropertiesMain.propTypes = {
 		maxLengthForMultiLineControls: PropTypes.number,
 		maxLengthForSingleLineControls: PropTypes.number,
 		convertValueDataTypes: PropTypes.bool,
-		showRequiredIndicator: PropTypes.bool
+		showRequiredIndicator: PropTypes.bool,
+		locale: PropTypes.string
 	}),
 	callbacks: PropTypes.shape({
 		controllerHandler: PropTypes.func,

package/src/common-properties/ui-conditions/condition-ops/contains.js

@@ -22,7 +22,7 @@ function op() {
 }
 
 function evaluate(paramInfo, param2Info, value, controller) {
-	const unsupportedControls = ["checkbox", "numberfield", "passwordfield"];
+	const unsupportedControls = ["checkbox", "numberfield", "passwordfield", "datepicker", "datepickerRange"];
 	if (unsupportedControls.indexOf(paramInfo.control.controlType) < 0) {
 		const dataType = typeof paramInfo.value;
 		if (typeof param2Info !== "undefined") {

package/src/common-properties/ui-conditions/condition-ops/greaterThan.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2022 Elyra Authors
+ * Copyright 2017-2023 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { ControlType } from "../../constants/form-constants";
 import logger from "./../../../../utils/logger";
 
 function op() {
@@ -41,6 +42,26 @@ function evaluate(paramInfo, param2Info, value, controller) {
 			return true;
 		}
 		return false;
+	case "string": {
+		if (paramInfo.control.controlType === ControlType.DATEPICKER) {
+			const param1Date = new Date(paramInfo.value);
+			if (!isNaN(param1Date) && param2Info) {
+				const param2Date = new Date(param2Info.value);
+				if (!isNaN(param2Date)) {
+					return param1Date.getTime() > param2Date.getTime();
+				}
+				throw new Error("Insufficient parameter for condition operation 'greaterThan'");
+			} else if (!isNaN(param1Date) && value) {
+				const valueDate = new Date(value);
+				if (!isNaN(valueDate)) {
+					return param1Date.getTime() > valueDate.getTime();
+				}
+				throw new Error("Insufficient parameter for condition operation 'greaterThan'");
+			}
+			throw new Error("Insufficient parameter for condition operation 'greaterThan'");
+		}
+		return true;
+	}
 	default:
 		logger.warn("Ignoring condition operation 'greaterThan' for parameter_ref " + paramInfo.param + " with input data type " + dataType);
 		return true;

package/src/common-properties/ui-conditions/condition-ops/isDateTime.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2022 Elyra Authors
+ * Copyright 2017-2023 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -16,7 +16,7 @@
 
 import { isValid, parse } from "date-fns";
 import { DEFAULT_DATE_FORMAT } from "../../constants/constants";
-
+import { ControlType } from "../../constants/form-constants";
 
 function op() {
 	return "isDateTime";
@@ -24,10 +24,13 @@ function op() {
 
 function evaluate(paramInfo, param2Info, value, controller) {
 	if (paramInfo.value) { // only check if there is a value.
-		// always use iso format for time
-		const timeDateFormat = (value === "time") ? "HH:mm:ss:xxx" : DEFAULT_DATE_FORMAT;
-		const date = parse(paramInfo.value, timeDateFormat, new Date());
-		return isValid(date);
+		if (paramInfo.control.controlType !== ControlType.DATEPICKER && paramInfo.control.controlType !== ControlType.DATEPICKERRANGE) {
+			// always use iso format for time
+			const timeDateFormat = (value === "time") ? "HH:mm:ss:xxx" : DEFAULT_DATE_FORMAT;
+			const date = parse(paramInfo.value, timeDateFormat, new Date());
+			return isValid(date);
+		}
+		return true;
 	}
 	return true;
 }

package/src/common-properties/ui-conditions/condition-ops/isEmpty.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2022 Elyra Authors
+ * Copyright 2017-2023 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { ControlType } from "../../constants/form-constants";
 import logger from "./../../../../utils/logger";
 
 function op() {
@@ -33,6 +34,11 @@ function evaluate(paramInfo, param2Info, value, controller) {
 	case "number":
 		return paramInfo.value === null;
 	case "object":
+		if (paramInfo.control.controlType === ControlType.DATEPICKERRANGE) {
+			const startDate = paramInfo.value[0].trim();
+			const endDate = paramInfo.value[1].trim();
+			return startDate === "" && endDate === ""; // DATEPICKERRANGE is empty if both start and end dates are empty
+		}
 		return paramInfo.value === null ? true : paramInfo.value.length === 0;
 	default:
 		logger.warn("Ignoring condition operation 'isEmpty' for parameter_ref " + paramInfo.param + " with input data type " + dataType);

package/src/common-properties/ui-conditions/condition-ops/isNotEmpty.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2022 Elyra Authors
+ * Copyright 2017-2023 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { ControlType } from "../../constants/form-constants";
 import logger from "./../../../../utils/logger";
 
 function op() {
@@ -32,6 +33,9 @@ function evaluate(paramInfo, param2Info, value, controller) {
 	case "number":
 		return paramInfo.value !== null;
 	case "object":
+		if (paramInfo.control.controlType === ControlType.DATEPICKERRANGE) {
+			return paramInfo.value[0].trim() !== "" || paramInfo.value[1].trim() !== "";
+		}
 		return paramInfo.value === null ? false : paramInfo.value.length !== 0;
 	default:
 		logger.warn("Ignoring condition operation 'isNotEmpty' for parameter_ref " + paramInfo.param + " with input data type " + dataType);

package/src/common-properties/ui-conditions/condition-ops/lessThan.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2022 Elyra Authors
+ * Copyright 2017-2023 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { ControlType } from "../../constants/form-constants";
 import logger from "./../../../../utils/logger";
 
 function op() {
@@ -42,6 +43,26 @@ function evaluate(paramInfo, param2Info, value, controller) {
 			return true;
 		}
 		return false;
+	case "string": {
+		if (paramInfo.control.controlType === ControlType.DATEPICKER) {
+			const param1Date = new Date(paramInfo.value);
+			if (!isNaN(param1Date) && param2Info) {
+				const param2Date = new Date(param2Info.value);
+				if (!isNaN(param2Date)) {
+					return param1Date.getTime() < param2Date.getTime();
+				}
+				throw new Error("Insufficient parameter for condition operation 'lessThan'");
+			} else if (!isNaN(param1Date) && value) {
+				const valueDate = new Date(value);
+				if (!isNaN(valueDate)) {
+					return param1Date.getTime() < valueDate.getTime();
+				}
+				throw new Error("Insufficient parameter for condition operation 'lessThan'");
+			}
+			throw new Error("Insufficient parameter for condition operation 'lessThan'");
+		}
+		return true;
+	}
 	default:
 		logger.warn("Ignoring condition operation 'lessThan' for parameter_ref " + paramInfo.param + " with input data type " + dataType);
 		return true;

package/src/common-properties/ui-conditions/condition-ops/notContains.js

@@ -22,7 +22,7 @@ function op() {
 }
 
 function evaluate(paramInfo, param2Info, value, controller) {
-	const unsupportedControls = ["checkbox", "numberfield", "passwordfield"];
+	const unsupportedControls = ["checkbox", "numberfield", "passwordfield", "datepicker", "datepickerRange"];
 	if (unsupportedControls.indexOf(paramInfo.control.controlType) < 0) {
 		const dataType = typeof paramInfo.value;
 		if (typeof param2Info !== "undefined") {

package/src/common-properties/ui-conditions/conditions-utils.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2022 Elyra Authors
+ * Copyright 2017-2023 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,9 +20,11 @@ import * as UiConditions from "./ui-conditions";
 import { formatMessage } from "../util/property-utils";
 import { DEFAULT_VALIDATION_MESSAGE, STATES, PANEL_TREE_ROOT,
 	CONDITION_TYPE, CONDITION_DEFINITION_INDEX,
-	MESSAGE_KEYS, DEFAULT_DATE_FORMAT, DEFAULT_TIME_FORMAT } from "../constants/constants";
+	MESSAGE_KEYS
+} from "../constants/constants";
 import { isEmpty, cloneDeep, has, union, isEqual } from "lodash";
 import seedrandom from "seedrandom";
+import { getDateTimeFormat } from "../util/control-utils";
 
 
 // ========= APIs ==================
@@ -1089,9 +1091,7 @@ function _injectRequiredDefinition(control, valDefinitions, requiredDefinitionsI
 
 function _injectDateTimeDefinition(control, valDefinitions, keyName, controlValId, intl) {
 	// inject date format validation definition
-	const format = (control.dateFormat) ? control.dateFormat : control.timeFormat;
-	const defaultFormat = (control.dateFormat) ? DEFAULT_DATE_FORMAT : DEFAULT_TIME_FORMAT;
-	const dtFormat = (format) ? format : defaultFormat;
+	const dtFormat = getDateTimeFormat(control);
 	const errorMsg = formatMessage(intl,
 		MESSAGE_KEYS.DATETIME_FORMAT_ERROR, { role: control.role, format: dtFormat });
 	const injectedDefinition = {

package/src/common-properties/util/control-utils.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2022 Elyra Authors
+ * Copyright 2017-2023 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 import { v4 as uuid4 } from "uuid";
-import { TRUNCATE_LIMIT } from "../constants/constants";
+import { TRUNCATE_LIMIT, DEFAULT_DATEPICKER_FORMAT, DEFAULT_DATE_FORMAT, DEFAULT_TIME_FORMAT } from "../constants/constants";
+import { ControlType } from "../constants/form-constants";
 
 /**
 * Used to return a unique id for a control that requires an html id
@@ -110,6 +111,19 @@ function getValidationProps(messageInfo, inTable) {
 	return validationProps;
 }
 
+// Get the format of the date/time control
+function getDateTimeFormat(control) {
+	let dtFormat;
+	if (control.controlType === ControlType.DATEPICKER || control.controlType === ControlType.DATEPICKERRANGE) {
+		dtFormat = (control.dateFormat) ? control.dateFormat : DEFAULT_DATEPICKER_FORMAT;
+	} else if (control.controlType === ControlType.DATEFIELD) {
+		dtFormat = (control.dateFormat) ? control.dateFormat : DEFAULT_DATE_FORMAT;
+	} else { // time
+		dtFormat = (control.timeFormat) ? control.timeFormat : DEFAULT_TIME_FORMAT;
+	}
+	return dtFormat;
+}
+
 export {
 	getCharLimit,
 	getControlId,
@@ -117,5 +131,6 @@ export {
 	splitNewlines,
 	joinNewlines,
 	truncateDisplayValue,
-	getValidationProps
+	getValidationProps,
+	getDateTimeFormat
 };