Skip to content

Commit 6a487b2

Browse files
getdavetyxla
authored andcommitted
Fix: ISO 8601 compliant year formatting in TimePicker (#75343)
* Fix: ISO 8601 compliant year formatting in TimePicker Adds zero-padding to years in date string construction to ensure ISO 8601 compliance. Years below 1000 are now properly formatted (e.g., year 999 becomes '0999') preventing Invalid Date errors. This is a minimal fix that only changes the internal date string formatting in setInConfiguredTimezone(). * Update CHANGELOG with PR number #75343 * Fix TypeScript error: remove minYear prop that doesn't exist on trunk * Add YearBelow1000 story to demonstrate zero-padding behavior * Remove dedicated YearBelow1000 story - not needed * Add input value assertion to ISO 8601 test * Add input value assertion after change * Add explicit zero-padding assertion to test Test now extracts year from output and verifies it's '0500' (zero-padded to 4 digits) * Fix test indentation per ESLint Co-authored-by: getdave <get_dave@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org>
1 parent 28f976d commit 6a487b2

3 files changed

Lines changed: 44 additions & 1 deletion

File tree

‎packages/components/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
### Bug Fixes
66

7+
- `TimePicker`: Fix date parsing for years below 1000 by implementing ISO 8601 compliant year formatting with zero-padding ([#75343](https://github.com/WordPress/gutenberg/pull/75343)).
78
- `Text`: Remove `text-wrap: balance` fallback. Only `text-wrap: pretty` is now used ([#75089](https://github.com/WordPress/gutenberg/pull/75089)).
89
- `RangeControl`: support forced-colors mode ([#75165](https://github.com/WordPress/gutenberg/pull/75165)).
910
- `ToggleControl`: Prevent `__nextHasNoMarginBottom` from logging a console warning ([#75296](https://github.com/WordPress/gutenberg/pull/75296)).

‎packages/components/src/date-time/time/test/index.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -591,4 +591,46 @@ describe( 'TimePicker', () => {
591591
} );
592592
} );
593593
} );
594+
595+
describe( 'ISO 8601 compliance', () => {
596+
it( 'should handle years below 1000 with zero-padded output', async () => {
597+
const user = userEvent.setup();
598+
const onChangeSpy = jest.fn();
599+
600+
render(
601+
<TimePicker
602+
currentTime="0999-10-18T11:00:00"
603+
onChange={ onChangeSpy }
604+
is12Hour
605+
/>
606+
);
607+
608+
const yearInput = screen.getByLabelText( 'Year' );
609+
610+
// Verify initial input displays correctly
611+
expect( yearInput ).toHaveValue( 999 );
612+
613+
// Change to year 500
614+
await user.clear( yearInput );
615+
await user.type( yearInput, '500' );
616+
await user.keyboard( '{Tab}' );
617+
618+
// Verify input field value after change (human-readable, not zero-padded)
619+
expect( yearInput ).toHaveValue( 500 );
620+
621+
// Verify onChange emits zero-padded ISO 8601 format
622+
expect( onChangeSpy ).toHaveBeenCalled();
623+
const lastCall =
624+
onChangeSpy.mock.calls[ onChangeSpy.mock.calls.length - 1 ];
625+
const outputDate = lastCall[ 0 ];
626+
627+
// Extract year from output and verify it's zero-padded to 4 digits
628+
const yearMatch = outputDate.match( /^(\d{4})-/ );
629+
expect( yearMatch ).not.toBeNull();
630+
expect( yearMatch[ 1 ] ).toBe( '0500' ); // Explicitly verify zero-padded year
631+
632+
expect( outputDate ).not.toContain( 'NaN' );
633+
expect( outputDate ).not.toContain( 'Invalid' );
634+
} );
635+
} );
594636
} );

‎packages/components/src/date-time/utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export function setInConfiguredTimezone(
139139
...updates,
140140
};
141141

142-
const year = String( values.year );
142+
const year = String( values.year ).padStart( 4, '0' );
143143
const month = String( values.month + 1 ).padStart( 2, '0' );
144144
const day = String( values.date ).padStart( 2, '0' );
145145
const hours = String( values.hours ).padStart( 2, '0' );

0 commit comments

Comments
 (0)