fix(react-datepicker-compat): Make DatePicker Compat stories SSR safe

packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateBoundaries.stories.tsx

@@ -8,21 +8,24 @@ const useStyles = makeStyles({
   },
 });
 
-const today = new Date(Date.now());
+const today = new Date();
 const minDate = addMonths(today, -1);
 const maxDate = addYears(today, 1);
 
+const onFormatDate = (date?: Date): string => {
+  return `${date?.getMonth()}/${date?.getDate()}/${date?.getFullYear()}`;
+};
+
 export const DateBoundaries = () => {
   const styles = useStyles();
 
   return (
-    <Field
-      label={`The date boundaries for this example are ${minDate.toLocaleDateString()} to ${maxDate.toLocaleDateString()}.`}
-    >
+    <Field label={`The date boundaries for this example are ${minDate.toDateString()} to ${maxDate.toDateString()}.`}>
       <DatePicker
         minDate={minDate}
         maxDate={maxDate}
         placeholder="Select a date..."
+        formatDate={onFormatDate}
         allowTextInput
         className={styles.inputControl}
       />

packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerErrorHandling.stories.tsx

@@ -9,10 +9,14 @@ const useStyles = makeStyles({
   },
 });
 
-const today = new Date('05/24/2023');
+const today = new Date();
 const minDate = addMonths(today, -1);
 const maxDate = addYears(today, 1);
 
+const onFormatDate = (date?: Date): string => {
+  return `${date?.getMonth()}/${date?.getDate()}/${date?.getFullYear()}`;
+};
+
 export const ErrorHandling = () => {
   const styles = useStyles();
   const [error, setError] = React.useState<DatePickerValidationResultData['error']>(undefined);
@@ -21,14 +25,15 @@ export const ErrorHandling = () => {
     <Field
       required
       label={
-        `Select a date out of bounds (minDate: ${minDate}, maxDate: ${maxDate}),` +
+        `Select a date out of bounds (minDate: ${minDate.toDateString()}, maxDate: ${maxDate.toDateString()}),` +
         ` type an invalid input, or leave the input empty and close the DatePicker.`
       }
       validationMessage={error && defaultDatePickerErrorStrings[error]}
     >
       <DatePicker
         minDate={minDate}
         maxDate={maxDate}
+        formatDate={onFormatDate}
         placeholder="Select a date..."
         allowTextInput
         onValidationResult={data => setError(data.error)}

scripts/test-ssr/src/commands/main.ts

@@ -15,8 +15,6 @@ import { renderToHTML } from '../utils/renderToHTML';
 import { visitPage } from '../utils/visitPage';
 
 const EXCLUDED_STORIES = [
-  // TODO: https://github.com/microsoft/fluentui/issues/27957
-  '**/react-datepicker-compat/**',
   // Portals currently do not support hydration
   // https://github.com/facebook/react/issues/13097
   '**/react-portal/**',