From 34fb071c6dd93293d402d1225f89a8c8a6569b70 Mon Sep 17 00:00:00 2001 From: Johnny Bouder Date: Tue, 3 Mar 2026 08:25:39 -0500 Subject: [PATCH 1/2] Ensure date picker can handle timestamp numbers as min/max. --- .../date-picker/date-picker.test.tsx | 33 +++++++++++++++++++ .../components/date-picker/date-picker.tsx | 21 ++++++++---- 2 files changed, 47 insertions(+), 7 deletions(-) diff --git a/packages/comet-uswds/src/components/date-picker/date-picker.test.tsx b/packages/comet-uswds/src/components/date-picker/date-picker.test.tsx index 7d03c926..f7abca40 100644 --- a/packages/comet-uswds/src/components/date-picker/date-picker.test.tsx +++ b/packages/comet-uswds/src/components/date-picker/date-picker.test.tsx @@ -183,4 +183,37 @@ describe('Date picker', () => { expect(onChange).toBeCalledTimes(3); expect(input.value).toBe('01/01/2020'); }); + + test('should render a date picker with minDate as number (timestamp) successfully', () => { + const minDate = new Date('2021-09-01').getTime(); // Unix timestamp + const { baseElement } = render( + , + ); + expect(baseElement).toBeTruthy(); + expect(baseElement.querySelector('.usa-date-picker')?.getAttribute('data-min-date')).toBe( + '2021-09-01', + ); + }); + + test('should render a date picker with maxDate as number (timestamp) successfully', () => { + const maxDate = new Date('2021-09-30').getTime(); // Unix timestamp + const { baseElement } = render( + , + ); + expect(baseElement).toBeTruthy(); + expect(baseElement.querySelector('.usa-date-picker')?.getAttribute('data-max-date')).toBe( + '2021-09-30', + ); + }); + + test('should render a date picker with dateRange as number (timestamp) successfully', () => { + const dateRange = new Date('2021-09-15').getTime(); // Unix timestamp + const { baseElement } = render( + , + ); + expect(baseElement).toBeTruthy(); + expect(baseElement.querySelector('.usa-date-picker')?.getAttribute('data-range-date')).toBe( + '2021-09-15', + ); + }); }); diff --git a/packages/comet-uswds/src/components/date-picker/date-picker.tsx b/packages/comet-uswds/src/components/date-picker/date-picker.tsx index 904edccf..b1bd4e2e 100644 --- a/packages/comet-uswds/src/components/date-picker/date-picker.tsx +++ b/packages/comet-uswds/src/components/date-picker/date-picker.tsx @@ -16,15 +16,15 @@ export interface DatePickerProps { /** * The date picker will not allow a date selection before this date. The date should be in the format YYYY-MM-DD. Typing in an earlier date will cause native form validation error. A default min date or 0000-01-01 is used as a default. */ - minDate?: Date | string; + minDate?: Date | string | number; /** * The date picker will not allow a date selection after this date. The date should be in the format YYYY-MM-DD. Typing in an later date will cause native form validation error. There is no default maximum date. */ - maxDate?: Date | string; + maxDate?: Date | string | number; /** * The date picker will show a range selection from the range date. The date should be in the format YYYY-MM-DD. */ - dateRange?: Date | string; + dateRange?: Date | string | number; /** * The date picker input will set this value if it is a valid date. The date should be in the format YYYY-MM-DD. */ @@ -130,11 +130,18 @@ export const DatePicker = ({ export default DatePicker; -function getDateString(minDate: string | Date): string { - if (typeof minDate === 'string') { - const date = new Date(minDate); +/** + * Converts a date value to YYYY-MM-DD format string. + * If the date is passed as a string or number (timestamp), it will be converted + * to a Date object first before formatting. + * @param dateValue - The date as a Date object, string, or number (timestamp) + * @returns The date formatted as YYYY-MM-DD + */ +function getDateString(dateValue: string | number | Date): string { + if (typeof dateValue === 'string' || typeof dateValue === 'number') { + const date = new Date(dateValue); return date.toISOString().substring(0, 10); } else { - return minDate.toISOString().substring(0, 10); + return dateValue.toISOString().substring(0, 10); } } From f70957a436d5399ca95e06c92466495a1d180e7e Mon Sep 17 00:00:00 2001 From: Johnny Bouder Date: Tue, 3 Mar 2026 08:34:50 -0500 Subject: [PATCH 2/2] Update jsdocs. --- .../comet-uswds/src/components/date-picker/date-picker.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/comet-uswds/src/components/date-picker/date-picker.tsx b/packages/comet-uswds/src/components/date-picker/date-picker.tsx index b1bd4e2e..7b13cefb 100644 --- a/packages/comet-uswds/src/components/date-picker/date-picker.tsx +++ b/packages/comet-uswds/src/components/date-picker/date-picker.tsx @@ -14,15 +14,15 @@ export interface DatePickerProps { */ name?: string; /** - * The date picker will not allow a date selection before this date. The date should be in the format YYYY-MM-DD. Typing in an earlier date will cause native form validation error. A default min date or 0000-01-01 is used as a default. + * The date picker will not allow a date selection before this date. Accepts a Date object, a string in the format YYYY-MM-DD, or a number (Unix timestamp in milliseconds). Typing in an earlier date will cause native form validation error. A default min date or 0000-01-01 is used as a default. */ minDate?: Date | string | number; /** - * The date picker will not allow a date selection after this date. The date should be in the format YYYY-MM-DD. Typing in an later date will cause native form validation error. There is no default maximum date. + * The date picker will not allow a date selection after this date. Accepts a Date object, a string in the format YYYY-MM-DD, or a number (Unix timestamp in milliseconds). Typing in an later date will cause native form validation error. There is no default maximum date. */ maxDate?: Date | string | number; /** - * The date picker will show a range selection from the range date. The date should be in the format YYYY-MM-DD. + * The date picker will show a range selection from the range date. Accepts a Date object, a string in the format YYYY-MM-DD, or a number (Unix timestamp in milliseconds). */ dateRange?: Date | string | number; /**