diff --git a/packages/main/cypress/specs/TimePicker.cy.tsx b/packages/main/cypress/specs/TimePicker.cy.tsx index fac36f93c8e4..1d35d0d66ecd 100644 --- a/packages/main/cypress/specs/TimePicker.cy.tsx +++ b/packages/main/cypress/specs/TimePicker.cy.tsx @@ -186,6 +186,138 @@ describe("TimePicker Tests", () => { cy.get("@changeStub").should("have.been.calledThrice"); }); + it("tests displayFormat and valueFormat - typing and blur", () => { + cy.mount( + + ); + + cy.get("[ui5-time-picker]") + .as("timePicker"); + + // Check that display shows 12-hour format with AM/PM + cy.get("@timePicker") + .ui5TimePickerGetInnerInput() + .should("have.value", "02:30:00 PM"); + + // Check that value attribute is in 24-hour format + cy.get("@timePicker") + .should("have.value", "14:30:00"); + + // Type a new time in display format + cy.get("@timePicker") + .ui5TimePickerGetInnerInput() + .realClick() + .should("be.focused") + .clear() + .realType("03:45:30 PM"); + + // While typing, value should show what user typed + cy.get("@timePicker") + .ui5TimePickerGetInnerInput() + .should("have.value", "03:45:30 PM"); + + // Blur the input + cy.get("body").realClick(); + + // After blur, value attribute should be normalized to valueFormat (24-hour) + cy.get("@timePicker") + .should("have.value", "15:45:30"); + + // Display should still show in displayFormat + cy.get("@timePicker") + .ui5TimePickerGetInnerInput() + .should("have.value", "03:45:30 PM"); + }); + + it("tests displayFormat and valueFormat - invalid input shows error", () => { + cy.mount( + + ); + + cy.get("[ui5-time-picker]") + .as("timePicker"); + + // Type invalid time + cy.get("@timePicker") + .ui5TimePickerGetInnerInput() + .realClick() + .should("be.focused") + .realType("99:99"); + + // Blur to trigger validation + cy.realPress("Tab"); + + // Should show error state + cy.get("@timePicker") + .should("have.attr", "value-state", "Negative"); + + // Value should remain invalid + cy.get("@timePicker") + .ui5TimePickerGetInnerInput() + .should("have.value", "99:99"); + }); + + it("tests displayFormat and valueFormat - programmatic value setting", () => { + cy.mount( + + ); + + cy.get("[ui5-time-picker]") + .as("timePicker"); + + // Set value programmatically in valueFormat + cy.get("@timePicker") + .invoke("prop", "value", "16:45:00"); + + // Display should show in displayFormat + cy.get("@timePicker") + .ui5TimePickerGetInnerInput() + .should("have.value", "04:45 PM"); + + // Value attribute should remain in valueFormat + cy.get("@timePicker") + .should("have.value", "16:45:00"); + }); + + it("tests valueFormat defaults to ISO format when not specified", () => { + cy.mount( + + ); + + cy.get("[ui5-time-picker]") + .as("timePicker"); + + // Type in display format + cy.get("@timePicker") + .ui5TimePickerGetInnerInput() + .realClick() + .should("be.focused") + .realType("02:30 PM"); + + cy.realPress("Tab"); + + // Value should default to ISO format (HH:mm:ss) + cy.get("@timePicker") + .should("have.value", "14:30:00"); + + // But display should still be in displayFormat + cy.get("@timePicker") + .ui5TimePickerGetInnerInput() + .should("have.value", "02:30 PM"); + }); + it("tests value state", () => { cy.mount(); diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts index e92a757760e6..d3c2b07963ba 100644 --- a/packages/main/src/TimePicker.ts +++ b/packages/main/src/TimePicker.ts @@ -258,6 +258,24 @@ class TimePicker extends UI5Element implements IFormInputElement { @property() placeholder?: string; + /** + * Determines the format, displayed in the input field. + * @default undefined + * @since 2.20.0 + * @public + */ + @property() + displayFormat?: string; + + /** + * Determines the format, used for the value attribute. + * @default undefined + * @since 2.20.0 + * @public + */ + @property() + valueFormat?: string; + /** * Determines the format, displayed in the input field. * @@ -266,6 +284,7 @@ class TimePicker extends UI5Element implements IFormInputElement { * hh:mm:ss a -> 2:23:15 PM * mm:ss -> 12:04 (only minutes and seconds) * @default undefined + * @deprecated Use displayFormat and valueFormat instead * @public */ @property() @@ -352,6 +371,19 @@ class TimePicker extends UI5Element implements IFormInputElement { tempValue?: string; + /** + * Cached instance of DateFormat with a format pattern of "yyyy-MM-dd". + * Used by the getISOFormat method to avoid creating a new DateFormat instance on each call. + * @private + */ + _isoFormatInstance?: DateFormat; + _displayFormatInstance?: DateFormat; + _valueFormatInstance?: DateFormat; + _lastDisplayFormatPattern?: string; + _lastValueFormatPattern?: string; + + _isLiveUpdate?: boolean; + @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; @@ -360,11 +392,11 @@ class TimePicker extends UI5Element implements IFormInputElement { if (validity.valueMissing) { // @ts-ignore oFormatOptions is a private API of DateFormat - return TimePicker.i18nBundle.getText(TIMEPICKER_VALUE_MISSING, this.getFormat().oFormatOptions.pattern as string); + return TimePicker.i18nBundle.getText(TIMEPICKER_VALUE_MISSING, this.getValueFormat().oFormatOptions.pattern as string); } if (validity.patternMismatch) { // @ts-ignore oFormatOptions is a private API of DateFormat - return TimePicker.i18nBundle.getText(TIMEPICKER_PATTERN_MISSMATCH, this.getFormat().oFormatOptions.pattern as string); + return TimePicker.i18nBundle.getText(TIMEPICKER_PATTERN_MISSMATCH, this.getValueFormat().oFormatOptions.pattern as string); } return ""; @@ -373,7 +405,7 @@ class TimePicker extends UI5Element implements IFormInputElement { get formValidity(): ValidityStateFlags { return { valueMissing: this.required && !this.value, - patternMismatch: !this.isValid(this.value), + patternMismatch: !this.isValidValue(this.value), }; } @@ -387,10 +419,22 @@ class TimePicker extends UI5Element implements IFormInputElement { onBeforeRendering() { if (this.value) { - this.value = this.normalizeValue(this.value) || this.value; - } + let parsedValue = this.getValueFormat().parse(this.value, true); + if (!parsedValue) { + // If it doesn't parse as valueFormat, try displayFormat + parsedValue = this.getDisplayFormat().parse(this.value, true); + } - this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(UI5Date.getInstance()); + if (parsedValue) { + this.tempValue = this.getValueFormat().format(parsedValue, true); + } else if (!this.tempValue) { + // Only fallback to current time if tempValue was never set and value is invalid + this.tempValue = this.getValueFormat().format(UI5Date.getInstance()); + } + } else if (!this.tempValue) { + // No value and no tempValue - use current time + this.tempValue = this.getValueFormat().format(UI5Date.getInstance()); + } } get roleDescription() { @@ -421,13 +465,13 @@ class TimePicker extends UI5Element implements IFormInputElement { * @default null */ get dateValue(): Date | null { - return this.getFormat().parse(this._effectiveValue) as Date; + return this.getValueFormat().parse(this._effectiveValue) as Date; } get _lastAvailableTime() { const date = UI5Date.getInstance(); date.setHours(23, 59, 59, 999); - return this.getFormat().format(date); + return this.getValueFormat().format(date); } /** @@ -454,8 +498,34 @@ class TimePicker extends UI5Element implements IFormInputElement { } get _displayFormat() { + if (this.displayFormat) { + return this.displayFormat; + } + + if (this._formatPattern) { + return this._formatPattern; + } + // @ts-ignore oFormatOptions is a private API of DateFormat - return this.getFormat().oFormatOptions.pattern as string; + return this.getISOFormat().oFormatOptions.pattern as string; + } + + get _valueFormat() { + if (this.valueFormat) { + return this.valueFormat; + } + + // If displayFormat is explicitly set but valueFormat is not, default to ISO format + if (this.displayFormat) { + return ""; + } + + // For backward compatibility: when using deprecated formatPattern, use it for both display and value + if (this._formatPattern) { + return this._formatPattern; + } + + return ""; } get _effectiveValue() { @@ -533,7 +603,7 @@ class TimePicker extends UI5Element implements IFormInputElement { * @returns Resolves when the Inputs popover is open */ openInputsPopover() { - this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(UI5Date.getInstance()); + this.tempValue = this.value && this.isValidValue(this.value) ? this.value : this.getValueFormat().format(UI5Date.getInstance()); const popover = this._inputsPopover; popover.opener = this; popover.open = true; @@ -598,28 +668,40 @@ class TimePicker extends UI5Element implements IFormInputElement { } _updateValueAndFireEvents(value: string, normalizeValue: boolean, eventsNames: Array<"input" | "change" | "value-changed">) { - if (value === this.value) { - return; + const valid = this.isValidDisplayValue(value); + const isInputEvent = eventsNames.includes("input"); + this._isLiveUpdate = isInputEvent; + + let normalizedValue = value; + if (value !== undefined && valid && normalizeValue && !isInputEvent) { + normalizedValue = this.normalizeValue(value); // transform valid values (in any format) to the correct format } - const valid = this.isValid(value); + // Store the previous value to check if it actually changed + const previousValue = this.value; - if (value !== undefined && valid && normalizeValue) { // if value === undefined, valid is guaranteed to be falsy - value = this.normalizeValue(value); // transform valid values (in any format) to the correct format + // During input events (live typing), only update tempValue, not the public value property + if (!isInputEvent) { + this.value = ""; // Do not remove! DurationPicker (an external component extending TimePicker) use case + this.value = normalizedValue; } - if (!eventsNames.includes("input")) { - this.value = ""; // Do not remove! DurationPicker (an external component extending TimePicker) use case -> value is 05:10, user tries 05:12, after normalization value is changed back to 05:10 so no invalidation happens, but the input still shows 05:12. Thus we enforce invalidation with the "" - this.value = value; + + // Always sync tempValue for the picker + this.tempValue = isInputEvent ? value : normalizedValue; + this._updateValueState(); // Change the value state to Error/None, but only if needed (must be called before early return) + + if (previousValue === this.value) { + return; } - this.tempValue = value; // if the picker is open, sync it - this._updateValueState(); // Change the value state to Error/None, but only if needed + eventsNames.forEach(eventName => { this.fireDecoratorEvent(eventName, { value, valid }); }); } _updateValueState() { - const isValid = this.isValid(this.value); + // During live typing, validate against displayFormat, otherwise validate against valueFormat + const isValid = this._isLiveUpdate ? this.isValidDisplayValue(this.value) : this.isValidValue(this.value); if (!isValid) { // If not valid - always set Error regardless of the current value state this.valueState = ValueState.Negative; } else if (isValid && this.valueState === ValueState.Negative) { // However if valid, change only Error (but not the others) to None @@ -703,15 +785,45 @@ class TimePicker extends UI5Element implements IFormInputElement { return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long"; } + get _isValueFormatPattern() { + return this._valueFormat !== "medium" && this._valueFormat !== "short" && this._valueFormat !== "long"; + } + + get _isDisplayFormatPattern() { + return this._displayFormat !== "medium" && this._displayFormat !== "short" && this._displayFormat !== "long"; + } + + get displayValue() { + // During live typing (input event), show what's in tempValue + if (this._isLiveUpdate) { + return this.tempValue || ""; + } + + if (!this.value) { + return ""; + } + + // Try to parse as valueFormat and display in displayFormat + const parsedValue = this.getValueFormat().parse(this.value, true); + if (parsedValue) { + return this.getDisplayFormat().format(parsedValue, true); + } + + // If parsing fails, return the raw value (could be invalid input) + return this.value; + } + getFormat() { let dateFormat; if (this._isPattern) { dateFormat = DateFormat.getDateInstance({ + strictParsing: true, pattern: this._formatPattern, }); } else { dateFormat = DateFormat.getDateInstance({ + strictParsing: true, style: this._formatPattern, }); } @@ -719,6 +831,70 @@ class TimePicker extends UI5Element implements IFormInputElement { return dateFormat; } + getISOFormat() { + if (!this._isoFormatInstance) { + this._isoFormatInstance = DateFormat.getTimeInstance({ + strictParsing: true, + pattern: "HH:mm:ss", + }); + } + return this._isoFormatInstance; + } + + getDisplayFormat() { + const pattern = this._displayFormat; + + // Return cached instance if pattern hasn't changed + if (this._displayFormatInstance && this._lastDisplayFormatPattern === pattern) { + return this._displayFormatInstance; + } + + this._lastDisplayFormatPattern = pattern; + + if (this._isDisplayFormatPattern) { + this._displayFormatInstance = DateFormat.getTimeInstance({ + strictParsing: true, + pattern: this._displayFormat, + }); + } else { + this._displayFormatInstance = DateFormat.getTimeInstance({ + strictParsing: true, + style: this._displayFormat, + }); + } + + return this._displayFormatInstance; + } + + getValueFormat() { + if (!this._valueFormat) { + return this.getISOFormat(); + } + + const pattern = this._valueFormat; + + // Return cached instance if pattern hasn't changed + if (this._valueFormatInstance && this._lastValueFormatPattern === pattern) { + return this._valueFormatInstance; + } + + this._lastValueFormatPattern = pattern; + + if (this._isValueFormatPattern) { + this._valueFormatInstance = DateFormat.getTimeInstance({ + strictParsing: true, + pattern: this._valueFormat, + }); + } else { + this._valueFormatInstance = DateFormat.getTimeInstance({ + strictParsing: true, + style: this._valueFormat, + }); + } + + return this._valueFormatInstance; + } + /** * Formats a Java Script date object into a string representing a locale date and time * according to the `formatPattern` property of the TimePicker instance @@ -727,7 +903,7 @@ class TimePicker extends UI5Element implements IFormInputElement { * @returns formatted value */ formatValue(date: Date): string { - return this.getFormat().format(date); + return this.getValueFormat().format(date); } /** @@ -741,18 +917,80 @@ class TimePicker extends UI5Element implements IFormInputElement { if (value === "") { return true; } - return !!this.getFormat().parse(value as string); + return !!this.getFormat().parse(value as string, true); + } + + isValidDisplayValue(value: string | undefined): boolean { + if (value === "") { + return true; + } + + return !!this.getDisplayFormat().parse(value as string, true); + } + + /** + * Checks if a value is valid against the current `valueFormat` value. + * + * **Note:** an empty string is considered as valid value. + * @param value The value to be tested against the value format + * @public + */ + isValidValue(value: string | undefined): boolean { + if (value === "") { + return true; + } + + return !!this.getValueFormat().parse(value as string, true); + } + + /** + * Converts a value from displayFormat to valueFormat + * @param value Value in displayFormat + * @returns Value in valueFormat + * @private + */ + getValueFromDisplayValue(value: string): string { + if (!this.getDisplayFormat().parse(value, true)) { + return value; + } + + return this.getValueFormat().format(this.getDisplayFormat().parse(value, true), true); + } + + /** + * Converts a value from valueFormat to displayFormat + * @param value Value in valueFormat + * @returns Value in displayFormat + * @private + */ + getDisplayValueFromValue(value: string): string { + if (!this.getValueFormat().parse(value, true)) { + return value; + } + + return this.getDisplayFormat().format(this.getValueFormat().parse(value, true), true); } normalizeValue(value: string) { if (value === "") { return value; } - return this.getFormat().format(this.getFormat().parse(value)); + + const parsedFromDisplay = this.getDisplayFormat().parse(value, true); + if (parsedFromDisplay) { + return this.getValueFormat().format(parsedFromDisplay, true); + } + + const parsedFromValue = this.getValueFormat().parse(value, true); + if (parsedFromValue) { + return this.getValueFormat().format(parsedFromValue, true); + } + + return value; } _modifyValueBy(amount: number, unit: string) { - const date = this.getFormat().parse(this._effectiveValue) as Date; + const date = this.getValueFormat().parse(this._effectiveValue) as Date; if (!date) { return; } diff --git a/packages/main/src/TimePickerTemplate.tsx b/packages/main/src/TimePickerTemplate.tsx index 16bc001907d7..2950d930523e 100644 --- a/packages/main/src/TimePickerTemplate.tsx +++ b/packages/main/src/TimePickerTemplate.tsx @@ -13,7 +13,7 @@ export default function TimePickerTemplate(this: TimePicker) { id={`${this._id}-inner`} class="ui5-time-picker-input" part="input" - value={this.value} + value={this.displayValue} placeholder={this._placeholder} disabled={this.disabled} readonly={this.readonly} diff --git a/packages/main/test/pages/TimePicker.html b/packages/main/test/pages/TimePicker.html index d060b16fff6f..33acbd3caec3 100644 --- a/packages/main/test/pages/TimePicker.html +++ b/packages/main/test/pages/TimePicker.html @@ -19,7 +19,7 @@
- + diff --git a/packages/website/docs/_components_pages/main/TimePicker.mdx b/packages/website/docs/_components_pages/main/TimePicker.mdx index 8a30e94d27ff..f5b40a4d0354 100644 --- a/packages/website/docs/_components_pages/main/TimePicker.mdx +++ b/packages/website/docs/_components_pages/main/TimePicker.mdx @@ -3,7 +3,7 @@ slug: ../TimePicker --- import Basic from "../../_samples/main/TimePicker/Basic/Basic.md"; -import FormatPatterns from "../../_samples/main/TimePicker/FormatPatterns/FormatPatterns.md"; +import CustomFormatting from "../../_samples/main/TimePicker/CustomFormatting/CustomFormatting.md"; import States from "../../_samples/main/TimePicker/States/States.md"; import TimePickerInDifferentTimezone from "../../_samples/main/TimePicker/TimePickerInDifferentTimezone/TimePickerInDifferentTimezone.md"; @@ -17,8 +17,11 @@ import TimePickerInDifferentTimezone from "../../_samples/main/TimePicker/TimePi ## More Samples -### Format Patterns - +### CustomFormatting +You can have custom formatting for the display value and the value property. +Supported format options are pattern-based on Unicode LDML Date Format notation. +For more information, see UTS #35: Unicode Locale Data Markup Language. + ### States TimePicker supports several semantic value states, readonly, disabled, etc. diff --git a/packages/website/docs/_samples/main/TimePicker/FormatPatterns/FormatPatterns.md b/packages/website/docs/_samples/main/TimePicker/CustomFormatting/CustomFormatting.md similarity index 100% rename from packages/website/docs/_samples/main/TimePicker/FormatPatterns/FormatPatterns.md rename to packages/website/docs/_samples/main/TimePicker/CustomFormatting/CustomFormatting.md diff --git a/packages/website/docs/_samples/main/TimePicker/FormatPatterns/main.js b/packages/website/docs/_samples/main/TimePicker/CustomFormatting/main.js similarity index 100% rename from packages/website/docs/_samples/main/TimePicker/FormatPatterns/main.js rename to packages/website/docs/_samples/main/TimePicker/CustomFormatting/main.js diff --git a/packages/website/docs/_samples/main/TimePicker/FormatPatterns/sample.html b/packages/website/docs/_samples/main/TimePicker/CustomFormatting/sample.html similarity index 69% rename from packages/website/docs/_samples/main/TimePicker/FormatPatterns/sample.html rename to packages/website/docs/_samples/main/TimePicker/CustomFormatting/sample.html index 4a72bf4822b9..b79870a5fd44 100644 --- a/packages/website/docs/_samples/main/TimePicker/FormatPatterns/sample.html +++ b/packages/website/docs/_samples/main/TimePicker/CustomFormatting/sample.html @@ -9,9 +9,8 @@ - - - + +