diff --git a/change/@fluentui-react-fd0c9c49-c0d9-4b5b-8991-45f1667ef481.json b/change/@fluentui-react-fd0c9c49-c0d9-4b5b-8991-45f1667ef481.json
new file mode 100644
index 00000000000000..cc1518e48ddae3
--- /dev/null
+++ b/change/@fluentui-react-fd0c9c49-c0d9-4b5b-8991-45f1667ef481.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Allowing DatePicker to be focusable within FocusZones by default.",
+  "packageName": "@fluentui/react",
+  "email": "humberto_makoto@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/DatePicker/DatePicker.base.tsx b/packages/react/src/components/DatePicker/DatePicker.base.tsx
index a8ead22b510983..a7efc9598e60d9 100644
--- a/packages/react/src/components/DatePicker/DatePicker.base.tsx
+++ b/packages/react/src/components/DatePicker/DatePicker.base.tsx
@@ -450,6 +450,8 @@ export const DatePickerBase: React.FunctionComponent<IDatePickerProps> = React.f
     textFieldProps && textFieldProps.id && textFieldProps.id !== id ? textFieldProps.id : id + '-label';
   const readOnly = !allowTextInput && !disabled;
 
+  const dataIsFocusable = (textFieldProps as any)?.['data-is-focusable'] ?? (props as any)['data-is-focusable'] ?? true;
+
   return (
     <div {...nativeProps} className={classNames.root} ref={forwardedRef}>
       <div ref={datePickerDiv} aria-owns={isCalendarShown ? calloutId : undefined} className={classNames.wrapper}>
@@ -471,6 +473,7 @@ export const DatePickerBase: React.FunctionComponent<IDatePickerProps> = React.f
           tabIndex={tabIndex}
           readOnly={!allowTextInput}
           {...textFieldProps}
+          data-is-focusable={dataIsFocusable}
           id={textFieldId}
           className={css(classNames.textField, textFieldProps && textFieldProps.className)}
           iconProps={{
diff --git a/packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
index 03ad49f5bececc..1a641924db7172 100644
--- a/packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
+++ b/packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
@@ -157,6 +157,7 @@ exports[`DatePicker renders DatePicker allowing text input correctly 1`] = `
                 @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){&::-ms-input-placeholder {
                   color: GrayText;
                 }
+            data-is-focusable={true}
             id="DatePicker0-label"
             onBlur={[Function]}
             onChange={[Function]}
@@ -390,6 +391,7 @@ exports[`DatePicker renders DatePicker with value correctly 1`] = `
                   overflow: hidden;
                   text-overflow: ellipsis;
                 }
+            data-is-focusable={true}
             id="DatePicker0-label"
             onBlur={[Function]}
             onChange={[Function]}
@@ -622,6 +624,7 @@ exports[`DatePicker renders default DatePicker correctly 1`] = `
                   overflow: hidden;
                   text-overflow: ellipsis;
                 }
+            data-is-focusable={true}
             id="DatePicker0-label"
             onBlur={[Function]}
             onChange={[Function]}