Min/Max Date Fix

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(
+      <DatePicker id={defaultId} name={defaultName} minDate={minDate} />,
+    );
+    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(
+      <DatePicker id={defaultId} name={defaultName} maxDate={maxDate} />,
+    );
+    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(
+      <DatePicker id={defaultId} name={defaultName} dateRange={dateRange} />,
+    );
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('.usa-date-picker')?.getAttribute('data-range-date')).toBe(
+      '2021-09-15',
+    );
+  });
 });

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);
   }
 }