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..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,17 +14,17 @@ 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;
+ 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;
+ 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;
+ 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);
}
}