diff --git a/change/@fluentui-react-headless-components-preview-e74c0e8e-4c60-49b2-b401-c01b375fbc31.json b/change/@fluentui-react-headless-components-preview-e74c0e8e-4c60-49b2-b401-c01b375fbc31.json
new file mode 100644
index 0000000000000..6ab6652c44182
--- /dev/null
+++ b/change/@fluentui-react-headless-components-preview-e74c0e8e-4c60-49b2-b401-c01b375fbc31.json
@@ -0,0 +1,6 @@
+{
+  "type": "minor",
+  "comment": "Add an unstyled DatePicker with shared date validation, headless Calendar composition, and native modal-dialog behavior.",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "dmytrokirpa@microsoft.com"
+}
diff --git a/packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js b/packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js
index 6d2171cf5db2b..f5af7b43f56d9 100644
--- a/packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js
+++ b/packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js
@@ -130,6 +130,7 @@ import {
   renderCompoundButton,
   useCompoundButton,
 } from '@fluentui/react-headless-components-preview/compound-button';
+import { DatePicker, renderDatePicker, useDatePicker } from '@fluentui/react-headless-components-preview/date-picker';
 import {
   Dialog,
   DialogActions,
@@ -733,6 +734,9 @@ console.log(
   CompoundButton,
   renderCompoundButton,
   useCompoundButton,
+  DatePicker,
+  renderDatePicker,
+  useDatePicker,
   Dialog,
   DialogActions,
   DialogBody,
diff --git a/packages/react-components/react-headless-components-preview/library/bundle-size/DatePicker.fixture.js b/packages/react-components/react-headless-components-preview/library/bundle-size/DatePicker.fixture.js
new file mode 100644
index 0000000000000..c86bac915270e
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/bundle-size/DatePicker.fixture.js
@@ -0,0 +1,7 @@
+import { DatePicker } from '@fluentui/react-headless-components-preview/date-picker';
+
+console.log(DatePicker);
+
+export default {
+  name: 'DatePicker',
+};
diff --git a/packages/react-components/react-headless-components-preview/library/etc/date-picker.api.md b/packages/react-components/react-headless-components-preview/library/etc/date-picker.api.md
new file mode 100644
index 0000000000000..1290e96bdfdc9
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/etc/date-picker.api.md
@@ -0,0 +1,80 @@
+## API Report File for "@fluentui/react-headless-components-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { CalendarBaseProps } from '@fluentui/react-calendar-preview';
+import { CalendarDayBaseProps } from '@fluentui/react-calendar-preview';
+import { CalendarDayHandle } from '@fluentui/react-calendar-preview';
+import type { CalendarMonthBaseProps } from '@fluentui/react-calendar-preview';
+import { CalendarMonthHandle } from '@fluentui/react-calendar-preview';
+import type { CalendarMonthSlots as CalendarMonthSlots_2 } from '@fluentui/react-calendar-preview';
+import type { CalendarSlots as CalendarSlots_2 } from '@fluentui/react-calendar-preview';
+import { CalendarYearBaseProps } from '@fluentui/react-calendar-preview';
+import { CalendarYearHandle } from '@fluentui/react-calendar-preview';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { DatePickerBaseProps } from '@fluentui/react-datepicker-preview';
+import type { DatePickerBaseState } from '@fluentui/react-datepicker-preview';
+import { DatePickerDateChangeData } from '@fluentui/react-datepicker-preview';
+import { DatePickerErrorType } from '@fluentui/react-datepicker-preview';
+import { DatePickerOpenChangeData } from '@fluentui/react-datepicker-preview';
+import { DatePickerValidationResultData } from '@fluentui/react-datepicker-preview';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { InputBaseProps } from '@fluentui/react-input';
+import type { JSXElement } from '@fluentui/react-utilities';
+import type { PositioningProps as PositioningProps_2 } from '@fluentui/react-positioning';
+import type { PositioningShorthandValue } from '@fluentui/react-positioning';
+import * as React_2 from 'react';
+import type { RefAttributes } from '@fluentui/react-utilities';
+import type { Slot } from '@fluentui/react-utilities';
+
+// @public
+export const DatePicker: ForwardRefComponent<DatePickerProps>;
+
+export { DatePickerDateChangeData }
+
+export { DatePickerErrorType }
+
+export { DatePickerOpenChangeData }
+
+// @public
+export type DatePickerProps = Omit<DatePickerBaseProps, 'calendar' | 'popupSurface' | 'inlinePopup' | 'mountNode' | 'positioning'> & {
+    calendar?: DatePickerSlots['calendar'];
+    trigger?: DatePickerSlots['trigger'];
+    popupSurface?: DatePickerSlots['popupSurface'];
+    positioning?: PositioningShorthand;
+};
+
+// @public
+export type DatePickerSlots = {
+    root: NonNullable<Slot<typeof Input>>;
+    calendar: NonNullable<Slot<Omit<CalendarProps, 'value' | 'defaultValue' | 'today' | 'minDate' | 'maxDate'> & RefAttributes<HTMLDivElement>>>;
+    trigger: NonNullable<Slot<'button'>>;
+    popupSurface: NonNullable<Slot<'dialog'>>;
+};
+
+// @public (undocumented)
+export type DatePickerState = ComponentState<DatePickerSlots> & Pick<DatePickerBaseState, 'open'> & {
+    renderSurface: boolean;
+    root: {
+        root: {
+            'data-open'?: '';
+            'data-disabled'?: '';
+            'data-invalid'?: '';
+        };
+    };
+};
+
+export { DatePickerValidationResultData }
+
+// @public
+export const renderDatePicker: (state: DatePickerState) => JSXElement;
+
+// @public
+export const useDatePicker: (props: DatePickerProps, ref: React_2.Ref<HTMLInputElement>) => DatePickerState;
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/packages/react-components/react-headless-components-preview/library/etc/utils.api.md b/packages/react-components/react-headless-components-preview/library/etc/utils.api.md
index 71fa91e7c2abe..8af5cc2306bda 100644
--- a/packages/react-components/react-headless-components-preview/library/etc/utils.api.md
+++ b/packages/react-components/react-headless-components-preview/library/etc/utils.api.md
@@ -5,6 +5,9 @@
 ```ts
 
 // @public
+export function toDataAttributeValue(value: boolean | undefined): '' | undefined;
+
+// @public (undocumented)
 export function toDataAttributeValue(value: boolean | string | number | undefined): string | undefined;
 
 // (No @packageDocumentation comment for this package)
diff --git a/packages/react-components/react-headless-components-preview/library/package.json b/packages/react-components/react-headless-components-preview/library/package.json
index d8df5de297cff..9366c152fc656 100644
--- a/packages/react-components/react-headless-components-preview/library/package.json
+++ b/packages/react-components/react-headless-components-preview/library/package.json
@@ -26,11 +26,13 @@
     "@fluentui/react-badge": "^9.5.6",
     "@fluentui/react-breadcrumb": "^9.4.6",
     "@fluentui/react-button": "^9.11.1",
+    "@fluentui/react-calendar-preview": "workspace:^",
     "@fluentui/react-card": "^9.7.3",
     "@fluentui/react-checkbox": "^9.6.5",
     "@fluentui/react-color-picker": "^9.3.1",
     "@fluentui/react-combobox": "^9.17.7",
     "@fluentui/react-context-selector": "^9.2.20",
+    "@fluentui/react-datepicker-preview": "workspace:^",
     "@fluentui/react-dialog": "^9.18.5",
     "@fluentui/react-divider": "^9.7.5",
     "@fluentui/react-drawer": "^9.13.4",
@@ -202,6 +204,16 @@
         "default": "./lib-commonjs/compound-button.cjs"
       }
     },
+    "./date-picker": {
+      "import": {
+        "types": "./dist/date-picker.d.ts",
+        "default": "./lib/date-picker.js"
+      },
+      "require": {
+        "types": "./dist/date-picker.d.cts",
+        "default": "./lib-commonjs/date-picker.cjs"
+      }
+    },
     "./dialog": {
       "import": {
         "types": "./dist/dialog.d.ts",
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/DatePicker.cy.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/DatePicker.cy.tsx
new file mode 100644
index 0000000000000..8ff79c242a5e8
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/DatePicker.cy.tsx
@@ -0,0 +1,219 @@
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { mount } from '@fluentui/scripts-cypress';
+import { polyfillBodyAndObserve } from '@microsoft/focusgroup-polyfill';
+import { Provider } from '../Provider';
+import { DatePicker } from './DatePicker';
+
+polyfillBodyAndObserve();
+const today = new Date(2030, 0, 15);
+const day = (label: string) => `td[role="gridcell"]:has(button[aria-label="${label}"])`;
+
+describe('headless DatePicker', () => {
+  it('opens from the keyboard, navigates and selects, then restores input focus without reopening', () => {
+    const onDateChange = cy.stub().as('dateChange');
+    const onOpenChange = cy.stub().as('openChange');
+    mount(
+      <Provider>
+        <DatePicker
+          aria-label="Date"
+          today={today}
+          openOnFocus
+          onDateChange={onDateChange}
+          onOpenChange={onOpenChange}
+        />
+      </Provider>,
+    );
+    cy.get('input').focus();
+    cy.get('dialog').should('be.visible').and('have.attr', 'open');
+    cy.get(day('January 15, 2030')).should('be.focused').realPress('ArrowRight');
+    cy.get(day('January 16, 2030')).should('be.focused').realPress('Enter');
+    cy.get('dialog').should('not.exist');
+    cy.get('input').should('be.focused').and('have.value', 'Wed Jan 16 2030');
+    cy.get('@dateChange').should('have.been.calledOnce');
+    cy.get('@openChange').should('have.been.calledTwice');
+    cy.get('input').realPress('ArrowDown');
+    cy.get(day('January 16, 2030')).should('be.focused').realPress('Escape');
+    cy.get('dialog').should('not.exist');
+    cy.get('input').should('be.focused');
+  });
+
+  it('makes outside content inert while modal and dismisses with Escape', () => {
+    mount(
+      <Provider>
+        <button>Outside</button>
+        <DatePicker aria-label="Date" today={today} popupSurface={{ open: true }} />
+      </Provider>,
+    );
+    cy.get('input').focus().realPress('Enter');
+    cy.get('dialog').should('be.visible');
+    cy.get('dialog').should(surface => expect(surface[0].matches(':modal')).to.equal(true));
+    cy.get(day('January 15, 2030')).focus();
+    cy.contains('button', 'Outside').then(button => {
+      button[0].focus();
+      expect(button[0].ownerDocument.activeElement).not.to.equal(button[0]);
+    });
+    cy.get(day('January 15, 2030')).focus().realPress('Escape');
+    cy.get('dialog').should('not.exist');
+    cy.get('input').should('be.focused');
+  });
+
+  it('dismisses a backdrop click and does not immediately reopen', () => {
+    mount(
+      <Provider>
+        <DatePicker aria-label="Date" today={today} openOnFocus />
+      </Provider>,
+    );
+    cy.get('input').focus();
+    cy.get('dialog').should('be.visible');
+    cy.get('dialog').click(-10, -10, { force: true });
+    cy.get('dialog').should('not.exist');
+    cy.get('input').should('be.focused');
+  });
+
+  it('keeps rejected controlled close requests modal', () => {
+    const onOpenChange = cy.stub().as('openChange');
+    mount(
+      <Provider>
+        <DatePicker aria-label="Date" today={today} open onOpenChange={onOpenChange} />
+      </Provider>,
+    );
+    cy.get('dialog').should('be.visible');
+    cy.focused().realPress('Escape');
+    cy.get('dialog').should('be.visible').and('have.attr', 'open');
+    cy.get('@openChange').should('have.been.calledOnce');
+  });
+
+  it('renders, selects, and restores focus in the input owner document', () => {
+    const Example = () => {
+      const [frame, setFrame] = React.useState<HTMLIFrameElement | null>(null);
+      const targetDocument = frame?.contentDocument;
+      return (
+        <>
+          <iframe title="DatePicker document" ref={setFrame} />
+          {targetDocument &&
+            createPortal(
+              <Provider targetDocument={targetDocument}>
+                <DatePicker today={today} aria-label="Date" />
+              </Provider>,
+              targetDocument.body,
+            )}
+        </>
+      );
+    };
+    mount(<Example />);
+    cy.get('iframe').then(frame => {
+      const targetDocument = (frame[0] as HTMLIFrameElement).contentDocument!;
+      cy.wrap(targetDocument.body).find('input').click();
+      cy.wrap(targetDocument.body)
+        .find('dialog')
+        .should('be.visible')
+        .should(surface => expect(surface[0].ownerDocument).to.equal(targetDocument));
+      cy.wrap(targetDocument.body).find('button[aria-label="January 16, 2030"]').click();
+      cy.wrap(targetDocument.body).find('dialog').should('not.exist');
+      cy.wrap(targetDocument.body)
+        .find('input')
+        .should('have.value', 'Wed Jan 16 2030')
+        .should(input => expect(targetDocument.activeElement).to.equal(input[0]));
+    });
+  });
+
+  it('supports month/year switching without committing until a day is selected', () => {
+    const onDateChange = cy.stub().as('dateChange');
+    mount(
+      <Provider>
+        <DatePicker aria-label="Date" today={today} calendar={{ layout: 'overlay' }} onDateChange={onDateChange} />
+      </Provider>,
+    );
+    cy.get('input').click();
+    cy.get('button[aria-label="January 2030, change month"]').click();
+    cy.get('button[aria-label="2030, change year"]').click();
+    cy.contains('button[role="gridcell"]', /^2031$/).click();
+    cy.get('button[role="gridcell"][aria-label="February"]').click();
+    cy.get('@dateChange').should('not.have.been.called');
+    cy.get('button[aria-label="February 10, 2031"]').click();
+    cy.get('input').should('have.value', 'Mon Feb 10 2031');
+    cy.get('@dateChange').should('have.been.calledOnce');
+  });
+
+  it('validates editable text and supports disabling the picker', () => {
+    const onValidationResult = cy.stub().as('validation');
+    const Example = () => {
+      const [disabled, setDisabled] = React.useState(false);
+      return (
+        <Provider>
+          <button onClick={() => setDisabled(true)}>Disable</button>
+          <DatePicker
+            aria-label="Date"
+            today={today}
+            allowTextInput
+            openOnClick={false}
+            disabled={disabled}
+            onValidationResult={onValidationResult}
+          />
+        </Provider>
+      );
+    };
+    mount(<Example />);
+    cy.get('input').type('not a date').blur();
+    cy.get('@validation').should('have.been.calledWithMatch', Cypress.sinon.match.any, { error: 'invalid-input' });
+    cy.get('input').type('2030-01-16').blur().should('have.value', 'Wed Jan 16 2030');
+    cy.contains('button', 'Disable').click();
+    cy.get('input').should('be.disabled');
+  });
+
+  it('preserves RTL day navigation', () => {
+    mount(
+      <Provider dir="rtl">
+        <DatePicker aria-label="Date" today={today} />
+      </Provider>,
+    );
+    cy.get('input').click();
+    cy.get(day('January 15, 2030')).should('be.focused').realPress('ArrowLeft');
+    cy.get(day('January 16, 2030')).should('be.focused').realPress('Enter');
+    cy.get('input').should('have.value', 'Wed Jan 16 2030');
+  });
+
+  it('supports month-only keyboard selection', () => {
+    mount(
+      <Provider>
+        <DatePicker aria-label="Date" today={today} calendar={{ dayPicker: null }} />
+      </Provider>,
+    );
+    cy.get('input').click();
+    cy.get('button[role="gridcell"][aria-label="January"]').should('be.focused').realPress('ArrowRight');
+    cy.get('button[role="gridcell"][aria-label="February"]').should('be.focused').realPress('Enter');
+    cy.get('dialog').should('not.exist');
+    cy.get('input').should('be.focused').and('have.value', 'Fri Feb 15 2030');
+  });
+
+  it('restores focus without requesting a reopen after an external controlled close', () => {
+    const onOpenChange = cy.stub().as('openChange');
+    let close: () => void;
+    const Example = () => {
+      const [open, setOpen] = React.useState(false);
+      close = () => setOpen(false);
+      return (
+        <Provider>
+          <DatePicker
+            today={today}
+            aria-label="Date"
+            open={open}
+            openOnFocus
+            onOpenChange={(event, data) => {
+              onOpenChange(event, data);
+              setOpen(data.open);
+            }}
+          />
+        </Provider>
+      );
+    };
+    mount(<Example />);
+    cy.get('input').focus();
+    cy.get('dialog').should('be.visible');
+    cy.then(() => close());
+    cy.get('dialog').should('not.exist');
+    cy.get('input').should('be.focused');
+    cy.get('@openChange').should('have.been.calledOnce');
+  });
+});
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/DatePicker.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/DatePicker.test.tsx
new file mode 100644
index 0000000000000..26d66596e824c
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/DatePicker.test.tsx
@@ -0,0 +1,257 @@
+import * as React from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { renderToString } from 'react-dom/server';
+import { isConformant } from '../../testing/isConformant';
+import { DatePicker } from './DatePicker';
+import { Field } from '../Field';
+
+const today = new Date(2030, 0, 15);
+
+describe('DatePicker', () => {
+  isConformant({
+    Component: DatePicker,
+    displayName: 'DatePicker',
+    primarySlot: 'input',
+    requiredProps: { 'aria-label': 'Date', today },
+  });
+
+  it('renders an empty, read-only combobox without icons or Fluent classes', () => {
+    const { container, getByRole, queryByRole } = render(<DatePicker aria-label="Date" today={today} />);
+    expect(getByRole('combobox')).toHaveValue('');
+    expect(getByRole('combobox')).toHaveAttribute('readonly');
+    expect(getByRole('combobox')).toHaveAttribute('aria-expanded', 'false');
+    expect(queryByRole('dialog')).toBeNull();
+    expect(container.querySelector('svg')).toBeNull();
+    expect(container.querySelector('[class*="fui-"]')).toBeNull();
+    expect(container.firstElementChild).not.toHaveAttribute('data-open');
+    expect(container.firstElementChild).not.toHaveAttribute('data-disabled');
+    expect(container.firstElementChild).not.toHaveAttribute('data-invalid');
+  });
+
+  it('owns its reserved state attributes after consumer props', () => {
+    const { container, getByRole, rerender } = render(
+      <DatePicker today={today} aria-label="Date" disabled aria-invalid data-open="" />,
+    );
+    expect(container.firstElementChild).toHaveAttribute('data-disabled', '');
+    expect(container.firstElementChild).toHaveAttribute('data-invalid', '');
+    expect(container.firstElementChild).not.toHaveAttribute('data-open');
+    expect(getByRole('combobox')).toBeDisabled();
+    expect(getByRole('button')).toBeDisabled();
+    rerender(<DatePicker today={today} aria-label="Date" data-disabled="" data-invalid="" />);
+    expect(container.firstElementChild).not.toHaveAttribute('data-disabled');
+    expect(container.firstElementChild).not.toHaveAttribute('data-invalid');
+  });
+
+  it('forwards the native input ref and slot refs, classes, and styles', () => {
+    const inputRef = React.createRef<HTMLInputElement>();
+    const rootRef = React.createRef<HTMLSpanElement>();
+    const { getByRole, container } = render(
+      <DatePicker
+        today={today}
+        ref={inputRef}
+        className="custom"
+        style={{ opacity: 0.5 }}
+        root={{ ref: rootRef }}
+        input={{ 'aria-label': 'Input slot' }}
+        trigger={{ children: 'Choose', 'aria-label': 'Choose date' }}
+      />,
+    );
+    expect(inputRef.current).toBe(getByRole('combobox'));
+    expect(rootRef.current).toBe(container.firstElementChild);
+    expect(container.firstElementChild).toHaveClass('custom');
+    expect(container.firstElementChild).toHaveStyle({ opacity: '0.5' });
+    expect(getByRole('combobox', { name: 'Input slot' })).toBeInTheDocument();
+    expect(getByRole('button', { name: 'Input slot Choose date' })).toHaveTextContent('Choose');
+  });
+
+  it('opens, selects, closes, and exposes the dialog relationship', async () => {
+    const onDateChange = jest.fn();
+    const onOpenChange = jest.fn();
+    const { container, getByRole, queryByRole } = render(
+      <DatePicker today={today} aria-label="Date" onDateChange={onDateChange} onOpenChange={onOpenChange} />,
+    );
+    fireEvent.click(getByRole('combobox'));
+    const dialog = getByRole('dialog', { name: 'Calendar' });
+    expect(getByRole('combobox')).toHaveAttribute('aria-controls', dialog.id);
+    expect(container.firstElementChild).toHaveAttribute('data-open', '');
+    expect(container.querySelector('[class*="fui-"]')).toBeNull();
+    fireEvent.click(getByRole('button', { name: 'January 16, 2030' }));
+    await waitFor(() => expect(queryByRole('dialog')).toBeNull());
+    expect(getByRole('combobox')).toHaveValue('Wed Jan 16 2030');
+    expect(onDateChange).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        value: new Date(2030, 0, 16),
+        reason: 'calendar',
+        selectedDateRange: [new Date(2030, 0, 16)],
+      }),
+    );
+    expect(onOpenChange.mock.calls.map(([, data]) => [data.open, data.reason])).toEqual([
+      [true, 'input'],
+      [false, 'selection'],
+    ]);
+  });
+
+  it('preserves controlled value and rejected open/close requests', () => {
+    const onOpenChange = jest.fn();
+    const onDateChange = jest.fn();
+    const { getByRole, rerender } = render(
+      <DatePicker
+        today={today}
+        aria-label="Date"
+        open={false}
+        value={today}
+        onOpenChange={onOpenChange}
+        onDateChange={onDateChange}
+      />,
+    );
+    fireEvent.keyDown(getByRole('combobox'), { key: 'ArrowDown' });
+    expect(getByRole('combobox')).toHaveAttribute('aria-expanded', 'false');
+    expect(onOpenChange).toHaveBeenLastCalledWith(expect.anything(), expect.objectContaining({ open: true }));
+    rerender(
+      <DatePicker
+        today={today}
+        aria-label="Date"
+        open
+        value={today}
+        onOpenChange={onOpenChange}
+        onDateChange={onDateChange}
+      />,
+    );
+    fireEvent.click(getByRole('button', { name: 'January 16, 2030' }));
+    expect(getByRole('combobox')).toHaveValue('Tue Jan 15 2030');
+    expect(getByRole('dialog')).toHaveAttribute('open');
+    expect(onDateChange).toHaveBeenCalledTimes(1);
+    fireEvent(getByRole('dialog'), new Event('cancel', { cancelable: true }));
+    expect(getByRole('dialog')).toHaveAttribute('open');
+  });
+
+  it('validates edits, required empty values, boundaries, and restricted local dates', () => {
+    const onValidationResult = jest.fn();
+    const onDateChange = jest.fn();
+    const { getByRole } = render(
+      <DatePicker
+        today={today}
+        aria-label="Date"
+        allowTextInput
+        required
+        minDate={new Date(2030, 0, 10)}
+        maxDate={new Date(2030, 0, 20)}
+        calendar={{ restrictedDates: [today] }}
+        onValidationResult={onValidationResult}
+        onDateChange={onDateChange}
+      />,
+    );
+    const input = getByRole('combobox');
+    for (const [value, error] of [
+      ['', 'required-input'],
+      ['not a date', 'invalid-input'],
+      ['2030-01-09', 'out-of-bounds'],
+      ['2030-01-15', 'out-of-bounds'],
+      ['2030-01-16', undefined],
+    ]) {
+      fireEvent.change(input, { target: { value } });
+      fireEvent.blur(input);
+      expect(onValidationResult).toHaveBeenLastCalledWith(expect.anything(), expect.objectContaining({ error }));
+    }
+    expect(onDateChange).toHaveBeenCalledTimes(1);
+    expect(input).toHaveValue('Wed Jan 16 2030');
+  });
+
+  it('preserves consumer cancellation and Calendar selection handlers', () => {
+    const onDateChange = jest.fn();
+    const { getByRole, queryByRole, rerender } = render(
+      <DatePicker today={today} aria-label="Date" input={{ onClick: event => event.preventDefault() }} />,
+    );
+    fireEvent.click(getByRole('combobox'));
+    expect(queryByRole('dialog')).toBeNull();
+    rerender(
+      <DatePicker
+        today={today}
+        aria-label="Date"
+        defaultOpen
+        onDateChange={onDateChange}
+        calendar={{ onSelectDate: event => event.preventDefault() }}
+      />,
+    );
+    fireEvent.click(getByRole('button'));
+    fireEvent.click(getByRole('button', { name: 'January 16, 2030' }));
+    expect(onDateChange).not.toHaveBeenCalled();
+    expect(getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('uses Field associations and exposes its validation state', () => {
+    const { container, getByRole } = render(
+      <Field label="Start date" required validationState="error" validationMessage="Invalid date">
+        <DatePicker today={today} />
+      </Field>,
+    );
+    const input = getByRole('combobox', { name: 'Start date' });
+    expect(input).toBeRequired();
+    const descriptionId = input.getAttribute('aria-describedby')!;
+    expect(container.querySelector(`[id="${descriptionId}"]`)).toHaveTextContent('Invalid date');
+    expect(container.querySelector('[data-invalid]')).toBeInTheDocument();
+  });
+
+  it.each(['Enter', ' '])('honors consumer cancellation of %s Calendar selection', key => {
+    const onDateChange = jest.fn();
+    const { getByRole } = render(
+      <DatePicker
+        today={today}
+        aria-label="Date"
+        defaultOpen
+        onDateChange={onDateChange}
+        calendar={{ onSelectDate: event => event.preventDefault() }}
+      />,
+    );
+    fireEvent.keyDown(getByRole('button', { name: 'January 16, 2030' }).closest('td')!, { key });
+    expect(onDateChange).not.toHaveBeenCalled();
+    expect(getByRole('dialog')).toHaveAttribute('open');
+  });
+
+  it('honors trigger and popup cancellation and calls Input callbacks once', () => {
+    const onClick = jest.fn(event => event.preventDefault());
+    const onOpenChange = jest.fn();
+    const { getByRole, rerender, queryByRole } = render(
+      <DatePicker
+        today={today}
+        aria-label="Date"
+        onClick={onClick}
+        onOpenChange={onOpenChange}
+        trigger={{ onClick: event => event.preventDefault() }}
+      />,
+    );
+    fireEvent.click(getByRole('combobox'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+    fireEvent.click(getByRole('button'));
+    expect(queryByRole('dialog')).toBeNull();
+    expect(onOpenChange).not.toHaveBeenCalled();
+    rerender(
+      <DatePicker
+        key="controlled"
+        today={today}
+        aria-label="Date"
+        open
+        onOpenChange={onOpenChange}
+        popupSurface={{ onCancel: event => event.preventDefault() }}
+      />,
+    );
+    fireEvent(getByRole('dialog'), new Event('cancel', { cancelable: true }));
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
+  it('closes a disabled open picker without accepting selection', async () => {
+    const onDateChange = jest.fn();
+    const { rerender, queryByRole, getByRole } = render(
+      <DatePicker today={today} aria-label="Date" defaultOpen onDateChange={onDateChange} />,
+    );
+    rerender(<DatePicker today={today} aria-label="Date" defaultOpen disabled onDateChange={onDateChange} />);
+    await waitFor(() => expect(queryByRole('dialog')).toBeNull());
+    expect(getByRole('combobox')).toBeDisabled();
+    expect(onDateChange).not.toHaveBeenCalled();
+  });
+
+  it('renders an initially open dialog on the server without executing native DOM APIs', () => {
+    expect(renderToString(<DatePicker today={today} aria-label="Date" defaultOpen />)).toContain('<dialog');
+  });
+});
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/DatePicker.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/DatePicker.tsx
new file mode 100644
index 0000000000000..910d9315b36fd
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/DatePicker.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { DatePickerProps } from './DatePicker.types';
+import { useDatePicker } from './useDatePicker';
+import { renderDatePicker } from './renderDatePicker';
+
+/** Unstyled date input with an accessible, native modal Calendar dialog. */
+export const DatePicker: ForwardRefComponent<DatePickerProps> = React.forwardRef((props, ref) =>
+  renderDatePicker(useDatePicker(props, ref)),
+);
+
+DatePicker.displayName = 'DatePicker';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/DatePicker.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/DatePicker.types.ts
new file mode 100644
index 0000000000000..808d1c4377b0d
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/DatePicker.types.ts
@@ -0,0 +1,54 @@
+import type { DatePickerBaseProps, DatePickerBaseState } from '@fluentui/react-datepicker-preview';
+import type { ComponentState, RefAttributes, Slot } from '@fluentui/react-utilities';
+import type { Input } from '../Input';
+import type { CalendarProps } from '../Calendar';
+import type { PositioningShorthand } from '../../positioning';
+
+export type {
+  DatePickerDateChangeData,
+  DatePickerErrorType,
+  DatePickerOpenChangeData,
+  DatePickerValidationResultData,
+} from '@fluentui/react-datepicker-preview';
+
+/** Semantic slots; no default icons, Fluent styles, or motion are applied. */
+export type DatePickerSlots = {
+  root: NonNullable<Slot<typeof Input>>;
+  calendar: NonNullable<
+    Slot<
+      Omit<CalendarProps, 'value' | 'defaultValue' | 'today' | 'minDate' | 'maxDate'> & RefAttributes<HTMLDivElement>
+    >
+  >;
+  trigger: NonNullable<Slot<'button'>>;
+  popupSurface: NonNullable<Slot<'dialog'>>;
+};
+
+/**
+ * An unstyled date input and native modal calendar dialog.
+ * The popup stays in the input's document and uses the browser top layer rather than a Portal.
+ */
+export type DatePickerProps = Omit<
+  DatePickerBaseProps,
+  'calendar' | 'popupSurface' | 'inlinePopup' | 'mountNode' | 'positioning'
+> & {
+  calendar?: DatePickerSlots['calendar'];
+  trigger?: DatePickerSlots['trigger'];
+  popupSurface?: DatePickerSlots['popupSurface'];
+  positioning?: PositioningShorthand;
+};
+
+export type DatePickerState = ComponentState<DatePickerSlots> &
+  Pick<DatePickerBaseState, 'open'> & {
+    /** Keep the native surface mounted until its close/focus restoration completes. */
+    renderSurface: boolean;
+    root: {
+      root: {
+        /** Present while the calendar is open. */
+        'data-open'?: '';
+        /** Present when the input and trigger are disabled. */
+        'data-disabled'?: '';
+        /** Present when the input is marked invalid. */
+        'data-invalid'?: '';
+      };
+    };
+  };
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/index.ts
new file mode 100644
index 0000000000000..8373b24482045
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/index.ts
@@ -0,0 +1,12 @@
+export { DatePicker } from './DatePicker';
+export { useDatePicker } from './useDatePicker';
+export { renderDatePicker } from './renderDatePicker';
+export type {
+  DatePickerProps,
+  DatePickerSlots,
+  DatePickerState,
+  DatePickerDateChangeData,
+  DatePickerErrorType,
+  DatePickerOpenChangeData,
+  DatePickerValidationResultData,
+} from './DatePicker.types';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/renderDatePicker.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/renderDatePicker.tsx
new file mode 100644
index 0000000000000..d022d3c4fc851
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/renderDatePicker.tsx
@@ -0,0 +1,21 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource @fluentui/react-jsx-runtime */
+
+import { assertSlots } from '@fluentui/react-utilities';
+import type { DatePickerSlots, DatePickerState } from './DatePicker.types';
+import type { JSXElement } from '@fluentui/react-utilities';
+
+/** Render the unstyled input, trigger, and native dialog without a Portal. */
+export const renderDatePicker = (state: DatePickerState): JSXElement => {
+  assertSlots<DatePickerSlots>(state);
+  return (
+    <>
+      <state.root />
+      {state.renderSurface && (
+        <state.popupSurface>
+          <state.calendar />
+        </state.popupSurface>
+      )}
+    </>
+  );
+};
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/useDatePicker.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/useDatePicker.tsx
new file mode 100644
index 0000000000000..3a9f32552e7ee
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DatePicker/useDatePicker.tsx
@@ -0,0 +1,280 @@
+'use client';
+
+/** @jsxRuntime automatic */
+/** @jsxImportSource @fluentui/react-jsx-runtime */
+
+import * as React from 'react';
+import { useDatePickerBase_unstable } from '@fluentui/react-datepicker-preview';
+import { useFieldContext_unstable } from '@fluentui/react-field';
+import { slot, assertSlots, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';
+import { Input } from '../Input';
+import type { InputProps } from '../Input';
+import { Calendar, CalendarDay, CalendarMonth } from '../Calendar';
+import type { CalendarDayHandle, CalendarMonthHandle, CalendarProps } from '../Calendar';
+import { usePopover } from '../Popover/usePopover';
+import { toDataAttributeValue } from '../../utils';
+import type { DatePickerProps, DatePickerSlots, DatePickerState } from './DatePicker.types';
+
+/** Reuse date state and native popup behavior without styled components or a focus runtime. */
+export const useDatePicker = (props: DatePickerProps, ref: React.Ref<HTMLInputElement>): DatePickerState => {
+  const dateState = useDatePickerBase_unstable({ ...props, positioning: undefined, popupSurface: undefined });
+  const { open, requestOpen, required, today } = dateState;
+  const {
+    value,
+    defaultValue,
+    allowTextInput = false,
+    disabled = false,
+    required: requiredProp,
+    formatDate,
+    parseDate,
+    onDateChange,
+    onValidationResult,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    today: todayProp,
+    minDate,
+    maxDate,
+    calendar: calendarProp,
+    trigger: triggerProp,
+    popupSurface: surfaceProp,
+    positioning,
+    openOnClick = true,
+    openOnFocus = false,
+    ...inputProps
+  } = props;
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const dayRef = React.useRef<CalendarDayHandle>(null);
+  const monthRef = React.useRef<CalendarMonthHandle>(null);
+  const suppressFocusOpening = React.useRef(false);
+  const popupId = useId('datepicker-popup-', slot.resolveShorthand(surfaceProp)?.id);
+  const field = useFieldContext_unstable();
+  const dismiss = useEventCallback((event: React.SyntheticEvent | Event) => {
+    if (!open || event.defaultPrevented) {
+      return;
+    }
+    suppressFocusOpening.current = true;
+    dateState.validate(event);
+    requestOpen(event, false, 'dismiss');
+  });
+  const popup = usePopover({
+    children: <React.Fragment />,
+    open,
+    trapFocus: true,
+    id: popupId,
+    positioning: positioning ?? 'below-start',
+    onOpenChange: (event, data) => {
+      if (!data.open) {
+        dismiss(event);
+      }
+    },
+  });
+
+  const input = slot.always(props.input, { elementType: 'input' });
+  input.ref = useMergedRefs(input.ref, ref, inputRef, popup.triggerRef);
+  const inputRoot = slot.always(props.root, { elementType: 'span' });
+  inputRoot.ref = useMergedRefs(inputRoot.ref, popup.positioning.targetRef);
+  const root = slot.always<InputProps>(inputProps, { elementType: Input });
+  root.root = inputRoot;
+  root.input = input;
+  root.disabled = input.disabled = disabled;
+  root.required = input.required = required;
+  root.value = input.value = dateState.text;
+  root.defaultValue = input.defaultValue = undefined;
+  root.type = input.type = 'text';
+  root.readOnly = input.readOnly = !allowTextInput;
+  input.role = 'combobox';
+  input['aria-haspopup'] = 'dialog';
+  input['aria-expanded'] = open;
+  input['aria-controls'] = open ? popupId : undefined;
+
+  const activate = useEventCallback((event: React.SyntheticEvent, reason: 'input' | 'icon' | 'focus') => {
+    if (!event.defaultPrevented && !disabled) {
+      if (!open) {
+        requestOpen(event, true, reason);
+      } else if (allowTextInput) {
+        dismiss(event);
+      }
+    }
+  });
+  const consumerChange = root.onChange;
+  const consumerNativeChange = input.onChange;
+  input.onChange = undefined;
+  root.onChange = useEventCallback((event, data) => {
+    consumerNativeChange?.(event);
+    consumerChange?.(event, data);
+    if (!event.defaultPrevented && !disabled) {
+      dateState.setText(data.value);
+      requestOpen(event, false, 'input');
+    }
+  });
+  const consumerClick = input.onClick ?? root.onClick;
+  input.onClick = useEventCallback(event => {
+    consumerClick?.(event);
+    if (openOnClick) {
+      activate(event, 'input');
+    }
+  });
+  const consumerFocus = input.onFocus ?? root.onFocus;
+  input.onFocus = useEventCallback(event => {
+    consumerFocus?.(event);
+    if (suppressFocusOpening.current) {
+      suppressFocusOpening.current = false;
+    } else if (openOnFocus && !allowTextInput) {
+      activate(event, 'focus');
+    }
+  });
+  const consumerBlur = input.onBlur ?? root.onBlur;
+  input.onBlur = useEventCallback(event => {
+    consumerBlur?.(event);
+    if (!event.defaultPrevented && !open) {
+      dateState.validate(event);
+    }
+  });
+  const consumerKeyDown = input.onKeyDown ?? root.onKeyDown;
+  input.onKeyDown = useEventCallback(event => {
+    consumerKeyDown?.(event);
+    if (event.defaultPrevented || disabled) {
+      return;
+    }
+    if (event.key === 'ArrowDown' || event.key === 'Enter') {
+      if (!open) {
+        dateState.validate(event);
+        requestOpen(event, true, 'keyboard');
+      }
+    } else if (event.key === 'Escape' && open) {
+      dismiss(event);
+    } else {
+      return;
+    }
+    event.preventDefault();
+  });
+
+  const trigger = slot.always(triggerProp, {
+    elementType: 'button',
+    defaultProps: { 'aria-label': 'Open calendar', tabIndex: -1 },
+  });
+  trigger.type = 'button';
+  trigger.disabled = disabled;
+  trigger['aria-haspopup'] = 'dialog';
+  trigger['aria-expanded'] = open;
+  trigger['aria-controls'] = open ? popupId : undefined;
+  const inputLabel = input['aria-label'] ?? props['aria-label'];
+  const labelId = input['aria-labelledby'] ?? props['aria-labelledby'] ?? field?.labelId;
+  const triggerId = useId('datepicker-trigger-', trigger.id);
+  trigger.id = triggerId;
+  trigger['aria-label'] = inputLabel && !labelId ? `${inputLabel} ${trigger['aria-label']}` : trigger['aria-label'];
+  trigger['aria-labelledby'] ??= labelId ? `${labelId} ${triggerId}` : undefined;
+  const consumerTriggerClick = trigger.onClick;
+  trigger.onClick = useEventCallback(event => {
+    consumerTriggerClick?.(event);
+    activate(event, 'icon');
+    event.stopPropagation();
+  });
+
+  const calendar = slot.always<CalendarProps>(calendarProp, { elementType: Calendar });
+  calendar.value = dateState.value && Number.isFinite(dateState.value.getTime()) ? dateState.value : null;
+  calendar.today = today;
+  calendar.minDate = minDate;
+  calendar.maxDate = maxDate;
+  const consumerSelect = calendar.onSelectDate;
+  calendar.onSelectDate = useEventCallback((event, data) => {
+    consumerSelect?.(event, data);
+    if (!event.defaultPrevented && !disabled) {
+      dateState.selectDate(event, data.date, data.selectedDateRange);
+      suppressFocusOpening.current = true;
+      requestOpen(event, false, 'selection');
+    }
+  });
+  const consumerDismiss = calendar.onDismiss;
+  calendar.onDismiss = useEventCallback((event, data) => {
+    consumerDismiss?.(event, data);
+    dismiss(event);
+    event.preventDefault();
+  });
+  const dayPicker = slot.optional(calendar.dayPicker, { elementType: CalendarDay, renderByDefault: true });
+  const monthPicker = slot.optional(calendar.monthPicker, { elementType: CalendarMonth, renderByDefault: true });
+  const mergedDayRef = useMergedRefs(dayPicker?.ref, dayRef);
+  const mergedMonthRef = useMergedRefs(monthPicker?.ref, monthRef);
+  if (dayPicker) {
+    dayPicker.ref = mergedDayRef;
+    calendar.dayPicker = dayPicker;
+  }
+  if (monthPicker) {
+    monthPicker.ref = mergedMonthRef;
+    calendar.monthPicker = monthPicker;
+  }
+
+  const popupSurface = slot.always(surfaceProp, {
+    elementType: 'dialog',
+    defaultProps: { 'aria-label': 'Calendar', tabIndex: -1 },
+  });
+  popupSurface.ref = useMergedRefs(popupSurface.ref, popup.contentRef, popup.positioning.containerRef);
+  popupSurface.id = popupId;
+  popupSurface.open = undefined;
+  popupSurface.role = 'dialog';
+  popupSurface['aria-modal'] = true;
+  const consumerCancel = popupSurface.onCancel;
+  popupSurface.onCancel = useEventCallback(event => {
+    consumerCancel?.(event);
+    dismiss(event);
+    // Keep a rejected controlled close request open.
+    event.preventDefault();
+  });
+  const consumerSurfaceClick = popupSurface.onClick;
+  popupSurface.onClick = useEventCallback(event => {
+    consumerSurfaceClick?.(event);
+    if (event.target === event.currentTarget) {
+      const bounds = event.currentTarget.getBoundingClientRect();
+      if (
+        event.clientX < bounds.left ||
+        event.clientX > bounds.right ||
+        event.clientY < bounds.top ||
+        event.clientY > bounds.bottom
+      ) {
+        dismiss(event);
+      }
+    }
+  });
+
+  React.useEffect(() => {
+    if (open) {
+      if (dayRef.current) {
+        dayRef.current.focus({ preventScroll: true });
+      } else if (monthRef.current) {
+        monthRef.current.focus({ preventScroll: true });
+      }
+    } else {
+      suppressFocusOpening.current = false;
+    }
+  }, [open]);
+
+  const invalid = input['aria-invalid'] ?? props['aria-invalid'] ?? field?.validationState === 'error';
+  const state: DatePickerState = {
+    components: { root: Input, calendar: Calendar, trigger: 'button', popupSurface: 'dialog' },
+    root: {
+      ...root,
+      root: {
+        ...inputRoot,
+        'data-open': toDataAttributeValue(open),
+        'data-disabled': toDataAttributeValue(disabled),
+        'data-invalid': toDataAttributeValue(invalid !== false && invalid !== 'false' && invalid !== undefined),
+      },
+    },
+    calendar,
+    trigger,
+    popupSurface,
+    open,
+    renderSurface: popup.shouldRenderSurface,
+  };
+  assertSlots<DatePickerSlots>(state);
+  const contentAfter = slot.always(props.contentAfter ?? {}, { elementType: 'span' });
+  contentAfter.children = (
+    <>
+      {contentAfter.children}
+      <state.trigger />
+    </>
+  );
+  state.root.contentAfter = contentAfter;
+  return state;
+};
diff --git a/packages/react-components/react-headless-components-preview/library/src/date-picker.ts b/packages/react-components/react-headless-components-preview/library/src/date-picker.ts
new file mode 100644
index 0000000000000..5fc0519e4be48
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/date-picker.ts
@@ -0,0 +1,10 @@
+export { DatePicker, useDatePicker, renderDatePicker } from './components/DatePicker/index';
+export type {
+  DatePickerProps,
+  DatePickerSlots,
+  DatePickerState,
+  DatePickerDateChangeData,
+  DatePickerErrorType,
+  DatePickerOpenChangeData,
+  DatePickerValidationResultData,
+} from './components/DatePicker/index';
diff --git a/packages/react-components/react-headless-components-preview/library/src/utils/toDataAttributeValue.ts b/packages/react-components/react-headless-components-preview/library/src/utils/toDataAttributeValue.ts
index da7d707d0ffb1..6d8dc4e3336fc 100644
--- a/packages/react-components/react-headless-components-preview/library/src/utils/toDataAttributeValue.ts
+++ b/packages/react-components/react-headless-components-preview/library/src/utils/toDataAttributeValue.ts
@@ -14,6 +14,8 @@
  * toDataAttributeValue(0); // '0'
  * ```
  */
+export function toDataAttributeValue(value: boolean | undefined): '' | undefined;
+export function toDataAttributeValue(value: boolean | string | number | undefined): string | undefined;
 export function toDataAttributeValue(value: boolean | string | number | undefined): string | undefined {
   if (value === true || value === 'true') {
     return '';
diff --git a/packages/react-components/react-headless-components-preview/stories/README.md b/packages/react-components/react-headless-components-preview/stories/README.md
index 48fffabba3d2d..08c1f6e32a725 100644
--- a/packages/react-components/react-headless-components-preview/stories/README.md
+++ b/packages/react-components/react-headless-components-preview/stories/README.md
@@ -25,6 +25,40 @@ module.exports = {
 
 No public API — this package only ships stories.
 
+## DatePicker integration status
+
+Headless DatePicker is implemented through the `date-picker` subpath. Its PR remains a blocked draft
+until the Calendar prerequisites merge; they are not part of the DatePicker stack.
+
+Prerequisites:
+
+- [Headless Calendar, microsoft/fluentui#36752](https://github.com/microsoft/fluentui/pull/36752)
+  must provide the unstyled Calendar family and its public composition/focus contract.
+- [Calendar popup focus and geometry fixes, microsoft/fluentui#36917](https://github.com/microsoft/fluentui/pull/36917)
+  must merge independently before rebasing the DatePicker stack. These changes intentionally
+  remain outside the DatePicker GitHub PR stack.
+
+### Implementation inventory
+
+- [`useDatePicker`](../library/src/components/DatePicker/useDatePicker.tsx) reuses
+  `useDatePickerBase_unstable` for controlled/uncontrolled dates, parsing/formatting, validation,
+  and popup requests.
+- Headless Input and Calendar supply the semantic slots, Field associations, native input ref,
+  restricted dates, keyboard navigation, and month/year switching. No styled fallback is used.
+- Headless Popover's native modal-dialog lifecycle and CSS-anchor positioning provide same-document
+  top-layer rendering and focus restoration. Native dialog, CSS anchors, and native focusgroup
+  support (or the application-supplied focusgroup polyfill) are required.
+- Stable exports are `DatePicker`, `useDatePicker`, `renderDatePicker`, and their props/slots/state
+  and event types. No root-barrel exports, design props, default icons, or Fluent styles are added.
+- Reserved Input-wrapper presence attributes are `data-open`, `data-disabled`, and `data-invalid`.
+- [Stories](./src/DatePicker) demonstrate default, editable/invalid, controlled, and disabled fields
+  with token-based CSS, visible focus, forced-colors support, and TSX/CSS source.
+- `mountNode` and `inlinePopup` are intentionally excluded: the native dialog remains in the input's
+  document and enters the browser top layer rather than a Portal.
+
+After the prerequisites merge, rebase and rerun package/build/browser validation before requesting
+review. Manual screen-reader and cross-browser acceptance remain release gates.
+
 ---
 
 ## Authoring a new component story
diff --git a/packages/react-components/react-headless-components-preview/stories/src/DatePicker/DatePickerControlled.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/DatePicker/DatePickerControlled.stories.tsx
new file mode 100644
index 0000000000000..770a5698d1f6a
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/stories/src/DatePicker/DatePickerControlled.stories.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { DatePicker } from '@fluentui/react-headless-components-preview/date-picker';
+import styles from './date-picker.module.css';
+
+export const Controlled = (): React.ReactNode => {
+  const [value, setValue] = React.useState<Date | null>(null);
+  const [open, setOpen] = React.useState(false);
+  return (
+    <div>
+      <DatePicker
+        aria-label="Controlled date"
+        className={styles.input}
+        value={value}
+        open={open}
+        onDateChange={(_event, data) => setValue(data.value)}
+        onOpenChange={(_event, data) => setOpen(data.open)}
+        trigger={{ children: 'Choose', className: styles.trigger }}
+        popupSurface={{ className: styles.popup }}
+        calendar={{ className: styles.calendar, monthPicker: null }}
+      />
+      <p role="status">{value?.toDateString() ?? 'No selection'}</p>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-headless-components-preview/stories/src/DatePicker/DatePickerDefault.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/DatePicker/DatePickerDefault.stories.tsx
new file mode 100644
index 0000000000000..f0e89abbf932d
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/stories/src/DatePicker/DatePickerDefault.stories.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { DatePicker } from '@fluentui/react-headless-components-preview/date-picker';
+import styles from './date-picker.module.css';
+
+export const Default = (): React.ReactNode => (
+  <DatePicker
+    aria-label="Start date"
+    className={styles.input}
+    placeholder="Choose a date"
+    trigger={{ children: 'Choose', className: styles.trigger }}
+    popupSurface={{ className: styles.popup }}
+    calendar={{ className: styles.calendar, monthPicker: null }}
+  />
+);
diff --git a/packages/react-components/react-headless-components-preview/stories/src/DatePicker/DatePickerDescription.md b/packages/react-components/react-headless-components-preview/stories/src/DatePicker/DatePickerDescription.md
new file mode 100644
index 0000000000000..51dd3393dc6e1
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/stories/src/DatePicker/DatePickerDescription.md
@@ -0,0 +1,34 @@
+DatePicker combines the headless Input and Calendar with shared date-input state from DatePicker
+Preview. It applies no Fluent styles, icons, or motion. The forwarded ref targets the native input.
+
+Provide an input name with `aria-label`, `aria-labelledby`, or Field. Localize the trigger's
+`aria-label`, popupSurface's dialog name, date format/parser, and Calendar content independently.
+Use `trigger` for your own text or icon; the default trigger has an accessible name but no visual
+content. Input `contentAfter` content is preserved before this trigger.
+
+The calendar opens in a native modal `dialog` in the same document, positioned with the headless
+CSS-anchor positioning hook. The browser supplies top-layer rendering, focus containment, and
+inert outside content. No Portal, `mountNode`, `inlinePopup`, or Tabster is used. Native dialog and
+CSS anchor positioning support are required, as with the headless Popover. Calendar requires
+native focusgroup support or the application-supplied focusgroup polyfill.
+
+Click the input/trigger or press Enter/ArrowDown to open. Date selection, Escape, the Calendar
+dismiss action, or a backdrop click closes the popup and restores input focus. Controlled close
+requests may be rejected without closing the native dialog. Editable text is opt-in, validated
+on blur/Enter/dismissal, and shares required, boundary, restricted-date, formatting, and callback
+semantics with DatePicker Preview. Field owns validation presentation.
+For editable fields, set `openOnClick={false}` to type without opening a modal dialog; the trigger
+and Enter/ArrowDown still open the calendar.
+
+Reserved root presence attributes are `data-open`, `data-disabled`, and `data-invalid`.
+They are empty strings when active and absent otherwise; consumer props cannot misrepresent them.
+The root is Input's wrapper (`root.root` in DatePicker state), not its native input. No size,
+appearance, or other design-state attributes are added. CSS can also use native/ARIA selectors.
+
+These examples provide their own token-based CSS, including focus and forced-colors affordances.
+The headless library does not guarantee compat visual parity; callers own visual accessibility.
+
+This implementation is developed against the pending headless Calendar in
+[microsoft/fluentui#36752](https://github.com/microsoft/fluentui/pull/36752) and remains blocked until
+that dependency and the standalone Calendar fixes in
+[microsoft/fluentui#36917](https://github.com/microsoft/fluentui/pull/36917) merge.
diff --git a/packages/react-components/react-headless-components-preview/stories/src/DatePicker/DatePickerDisabled.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/DatePicker/DatePickerDisabled.stories.tsx
new file mode 100644
index 0000000000000..dbdef5c05e5a7
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/stories/src/DatePicker/DatePickerDisabled.stories.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { DatePicker } from '@fluentui/react-headless-components-preview/date-picker';
+import styles from './date-picker.module.css';
+
+export const Disabled = (): React.ReactNode => (
+  <DatePicker
+    aria-label="Unavailable date"
+    className={styles.input}
+    disabled
+    trigger={{ children: 'Choose', className: styles.trigger }}
+  />
+);
diff --git a/packages/react-components/react-headless-components-preview/stories/src/DatePicker/DatePickerEditable.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/DatePicker/DatePickerEditable.stories.tsx
new file mode 100644
index 0000000000000..3f350cbc4a744
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/stories/src/DatePicker/DatePickerEditable.stories.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { DatePicker } from '@fluentui/react-headless-components-preview/date-picker';
+import styles from './date-picker.module.css';
+
+export const Editable = (): React.ReactNode => {
+  const [error, setError] = React.useState<string>();
+  return (
+    <div>
+      <DatePicker
+        aria-label="Start date"
+        aria-describedby="date-error"
+        aria-invalid={!!error}
+        className={styles.input}
+        allowTextInput
+        openOnClick={false}
+        required
+        trigger={{ children: 'Choose', className: styles.trigger }}
+        popupSurface={{ className: styles.popup }}
+        calendar={{ className: styles.calendar, monthPicker: null }}
+        onValidationResult={(_event, data) => setError(data.error)}
+      />
+      <p id="date-error" role="status">
+        {error}
+      </p>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-headless-components-preview/stories/src/DatePicker/DatePickerInitiallyOpen.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/DatePicker/DatePickerInitiallyOpen.stories.tsx
new file mode 100644
index 0000000000000..52604101d76a7
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/stories/src/DatePicker/DatePickerInitiallyOpen.stories.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { DatePicker } from '@fluentui/react-headless-components-preview/date-picker';
+import styles from './date-picker.module.css';
+
+export const InitiallyOpen = (): React.ReactNode => (
+  <DatePicker
+    aria-label="Start date"
+    defaultOpen
+    className={styles.input}
+    trigger={{ children: 'Choose', className: styles.trigger }}
+    popupSurface={{ className: styles.popup }}
+    calendar={{ className: styles.calendar, monthPicker: null }}
+  />
+);
diff --git a/packages/react-components/react-headless-components-preview/stories/src/DatePicker/date-picker.module.css b/packages/react-components/react-headless-components-preview/stories/src/DatePicker/date-picker.module.css
new file mode 100644
index 0000000000000..4591df2664848
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/stories/src/DatePicker/date-picker.module.css
@@ -0,0 +1,92 @@
+.input {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border: var(--stroke-thin) solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-sans);
+}
+
+.input input {
+  min-inline-size: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+}
+
+.input[data-disabled] {
+  opacity: 0.5;
+}
+
+.input[data-invalid] {
+  border-color: var(--danger);
+}
+
+.input:focus-within,
+.trigger:focus-visible,
+.calendar button:focus-visible,
+.calendar [tabindex]:focus-visible {
+  outline: var(--stroke-thick) solid var(--accent);
+  outline-offset: var(--stroke-thick);
+}
+
+.trigger,
+.calendar button {
+  padding: var(--space-1) var(--space-2);
+  border: var(--stroke-thin) solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elev);
+  color: var(--text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.trigger:disabled,
+.calendar [aria-disabled='true'] {
+  color: var(--text-faint);
+  cursor: default;
+}
+
+.popup {
+  max-inline-size: calc(100% - var(--space-4));
+  padding: var(--space-4);
+  border: var(--stroke-thin) solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--bg-elev);
+  color: var(--text);
+  box-shadow: var(--shadow-3);
+  font-family: var(--font-sans);
+}
+
+.calendar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.calendar [role='grid'] {
+  border-spacing: var(--space-1);
+}
+
+.calendar [aria-selected='true'] {
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+
+@media (forced-colors: active) {
+  .input[data-invalid],
+  .calendar [aria-selected='true'] {
+    outline: var(--stroke-thick) solid Highlight;
+  }
+
+  .input:focus-within,
+  .trigger:focus-visible,
+  .calendar button:focus-visible,
+  .calendar [tabindex]:focus-visible {
+    outline-color: Highlight;
+  }
+}
diff --git a/packages/react-components/react-headless-components-preview/stories/src/DatePicker/index.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/DatePicker/index.stories.tsx
new file mode 100644
index 0000000000000..0220d78983571
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/stories/src/DatePicker/index.stories.tsx
@@ -0,0 +1,15 @@
+import { DatePicker } from '@fluentui/react-headless-components-preview/date-picker';
+import descriptionMd from './DatePickerDescription.md';
+import './date-picker.module.css';
+
+export { Default } from './DatePickerDefault.stories';
+export { Editable } from './DatePickerEditable.stories';
+export { Controlled } from './DatePickerControlled.stories';
+export { Disabled } from './DatePickerDisabled.stories';
+export { InitiallyOpen } from './DatePickerInitiallyOpen.stories';
+
+export default {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+  parameters: { docs: { description: { component: descriptionMd } } },
+};
diff --git a/yarn.lock b/yarn.lock
index 7ca0d481934b0..34101656b714a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4441,11 +4441,13 @@ __metadata:
     "@fluentui/react-badge": "npm:^9.5.6"
     "@fluentui/react-breadcrumb": "npm:^9.4.6"
     "@fluentui/react-button": "npm:^9.11.1"
+    "@fluentui/react-calendar-preview": "workspace:^"
     "@fluentui/react-card": "npm:^9.7.3"
     "@fluentui/react-checkbox": "npm:^9.6.5"
     "@fluentui/react-color-picker": "npm:^9.3.1"
     "@fluentui/react-combobox": "npm:^9.17.7"
     "@fluentui/react-context-selector": "npm:^9.2.20"
+    "@fluentui/react-datepicker-preview": "workspace:^"
     "@fluentui/react-dialog": "npm:^9.18.5"
     "@fluentui/react-divider": "npm:^9.7.5"
     "@fluentui/react-drawer": "npm:^9.13.4"