diff --git a/packages/lab/src/__tests__/__e2e__/date-picker/DatePicker.cy.tsx b/packages/lab/src/__tests__/__e2e__/date-picker/DatePicker.cy.tsx
index 1ddccf3b03..84c4b6087c 100644
--- a/packages/lab/src/__tests__/__e2e__/date-picker/DatePicker.cy.tsx
+++ b/packages/lab/src/__tests__/__e2e__/date-picker/DatePicker.cy.tsx
@@ -1,5 +1,4 @@
 import { composeStories } from "@storybook/react";
-import { ChangeEvent } from "react";
 import * as datePickerStories from "@stories/date-picker/date-picker.stories";
 import { checkAccessibility } from "../../../../../../cypress/tests/checkAccessibility";
 import {
@@ -82,6 +81,11 @@ describe("GIVEN a DatePicker", () => {
       cy.mount(<Default defaultStartDate={testDate} disabled />);
       cy.findByRole("button").should("be.disabled");
     });
+    it("THEN render read only when prop is passed", () => {
+      cy.mount(<Default defaultStartDate={testDate} readOnly />);
+      cy.findByRole("textbox").should("have.attr", "readonly");
+      cy.findByRole("button").should("be.disabled");
+    });
     it("THEN it should update the selected month when changing selected date", () => {
       cy.mount(<Default defaultStartDate={testDate} />);
       cy.findByRole("textbox").click().clear().type(testInput);
@@ -95,7 +99,6 @@ describe("GIVEN a DatePicker", () => {
       cy.mount(
         <Default
           defaultStartDate={testDate}
-          // @ts-ignore
           CalendarProps={{ visibleMonth: testDate }}
         />
       );
diff --git a/packages/lab/src/date-input/DateInput.css b/packages/lab/src/date-input/DateInput.css
index 95d9c2435f..f1b777411e 100644
--- a/packages/lab/src/date-input/DateInput.css
+++ b/packages/lab/src/date-input/DateInput.css
@@ -105,7 +105,6 @@
   padding: 0;
   text-align: left;
   width: min-content;
-  flex-grow: 1;
 }
 
 /* Reset in the  class */
diff --git a/packages/lab/src/date-picker/DatePicker.tsx b/packages/lab/src/date-picker/DatePicker.tsx
index d4a04ec5cc..b06cd55e99 100644
--- a/packages/lab/src/date-picker/DatePicker.tsx
+++ b/packages/lab/src/date-picker/DatePicker.tsx
@@ -15,10 +15,7 @@ import { flip, useDismiss, useInteractions } from "@floating-ui/react";
 import { DateInput } from "../date-input";
 import { DateValue, getLocalTimeZone, today } from "@internationalized/date";
 import { CalendarIcon } from "@salt-ds/icons";
-import {
-  UseRangeSelectionCalendarProps,
-  UseSingleSelectionCalendarProps,
-} from "../calendar";
+import { CalendarProps } from "../calendar";
 
 const withBaseName = makePrefixer("saltDatePicker");
 
@@ -55,9 +52,15 @@ export interface DatePickerProps
   /**
    * Props to be passed to the Calendar component.
    */
-  CalendarProps?:
-    | UseRangeSelectionCalendarProps
-    | UseSingleSelectionCalendarProps;
+  CalendarProps?: Partial<
+    Omit<
+      CalendarProps,
+      | "selectionVariant"
+      | "selectedDate"
+      | "defaultSelectedDate"
+      | "onSelectedDateChange"
+    >
+  >;
   /**
    * Function to format the input value.
    */
@@ -70,6 +73,14 @@ export interface DatePickerProps
    * Display or hide the component.
    */
   open?: boolean;
+  /**
+   * Helper text to display in the panel
+   */
+  helperText?: string;
+  /**
+   * If `true`, the component is read only.
+   */
+  readOnly?: boolean;
 }
 
 export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
@@ -87,6 +98,8 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       className,
       open: openProp,
       onOpenChange: onOpenChangeProp,
+      helperText,
+      readOnly: readOnlyProp,
       ...rest
     },
     ref
@@ -142,6 +155,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     ]);
     const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } =
       useFormFieldProps();
+    const isReadOnly = readOnlyProp || formFieldReadOnly;
 
     const getPanelPosition = () => ({
       top: y ?? 0,
@@ -200,11 +214,12 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           endInputRef={endInputRef}
           placeholder={placeholder}
           dateFormatter={dateFormatter}
+          readOnly={isReadOnly}
           endAdornment={
             <Button
               variant="secondary"
               onClick={handleCalendarButton}
-              disabled={disabled || formFieldReadOnly || formFieldDisabled}
+              disabled={disabled || isReadOnly || formFieldDisabled}
               aria-label="Open Calendar"
             >
               <CalendarIcon aria-hidden />
@@ -217,6 +232,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           {...getFloatingProps()}
           onSelect={handleSelect}
           CalendarProps={CalendarProps}
+          helperText={helperText}
         />
       </DatePickerContext.Provider>
     );
diff --git a/packages/lab/src/date-picker/DatePickerPanel.css b/packages/lab/src/date-picker/DatePickerPanel.css
index 90e35f1241..d82bf9f7bd 100644
--- a/packages/lab/src/date-picker/DatePickerPanel.css
+++ b/packages/lab/src/date-picker/DatePickerPanel.css
@@ -9,3 +9,11 @@
   box-sizing: border-box;
   display: flex;
 }
+.saltDatePickerPanel-container {
+  width: min-content;
+  gap: 1px;
+}
+
+.saltDatePickerPanel-header {
+  padding: var(--salt-spacing-100);
+}
diff --git a/packages/lab/src/date-picker/DatePickerPanel.tsx b/packages/lab/src/date-picker/DatePickerPanel.tsx
index d4e474293a..da001c7d4e 100644
--- a/packages/lab/src/date-picker/DatePickerPanel.tsx
+++ b/packages/lab/src/date-picker/DatePickerPanel.tsx
@@ -5,7 +5,9 @@ import {
   useState,
 } from "react";
 import {
+  FlexItem,
   FlexLayout,
+  FormFieldHelperText,
   makePrefixer,
   StackLayout,
   useFloatingComponent,
@@ -26,6 +28,7 @@ import { DateValue, endOfMonth, startOfMonth } from "@internationalized/date";
 
 export interface DatePickerPanelProps extends ComponentPropsWithoutRef<"div"> {
   onSelect?: () => void;
+  helperText?: string;
   CalendarProps?: Partial<
     Omit<
       CalendarProps,
@@ -41,7 +44,7 @@ const withBaseName = makePrefixer("saltDatePickerPanel");
 
 export const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>(
   function DatePickerPanel(props, ref) {
-    const { className, onSelect, CalendarProps, ...rest } = props;
+    const { className, onSelect, helperText, CalendarProps, ...rest } = props;
 
     const targetWindow = useWindow();
     useComponentCssInjection({
@@ -141,7 +144,12 @@ export const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>(
         {...a11yProps}
         {...rest}
       >
-        <StackLayout separators gap={0}>
+        <StackLayout separators gap={0} className={withBaseName("container")}>
+          {helperText && (
+            <FlexItem className={withBaseName("header")}>
+              <FormFieldHelperText>{helperText}</FormFieldHelperText>
+            </FlexItem>
+          )}
           <FlexLayout>
             <Calendar
               visibleMonth={startVisibleMonth}
diff --git a/packages/lab/stories/date-picker/date-picker.stories.tsx b/packages/lab/stories/date-picker/date-picker.stories.tsx
index baec99a335..1df097e12a 100644
--- a/packages/lab/stories/date-picker/date-picker.stories.tsx
+++ b/packages/lab/stories/date-picker/date-picker.stories.tsx
@@ -1,5 +1,10 @@
 import { DatePicker, DatePickerProps } from "@salt-ds/lab";
 import { Meta, StoryFn } from "@storybook/react";
+import {
+  FormField,
+  FormFieldHelperText as FormHelperText,
+  FormFieldLabel as FormLabel,
+} from "@salt-ds/core";
 
 export default {
   title: "Lab/Date Picker",
@@ -17,3 +22,14 @@ export const Range = DatePickerTemplate.bind({});
 Range.args = {
   selectionVariant: "range",
 };
+
+export const WithFormField: StoryFn<DatePickerProps> = (args) => {
+  const helperText = "Date format DD MMM YYYY (e.g. 09 Jun 2021)";
+  return (
+    <FormField style={{ width: "200px" }}>
+      <FormLabel>Pick a date</FormLabel>
+      <DatePicker {...args} helperText={helperText} />
+      <FormHelperText>{helperText}</FormHelperText>
+    </FormField>
+  );
+};
diff --git a/site/docs/components/date-picker/accessibility.mdx b/site/docs/components/date-picker/accessibility.mdx
index d93310ae23..bc854d8f65 100644
--- a/site/docs/components/date-picker/accessibility.mdx
+++ b/site/docs/components/date-picker/accessibility.mdx
@@ -62,7 +62,7 @@ data:
   </KeyboardControl>
   <KeyboardControl keyOrCombos="Shift + Left Arrow / Shift + Right Arrow">
 
-    Drags selection over text characters, one at a time.
+    When the input area has focus, drags selection over text characters, one at a time.
 
   </KeyboardControl>
   <KeyboardControl keyOrCombos="Backspace">
diff --git a/site/docs/components/date-picker/examples.mdx b/site/docs/components/date-picker/examples.mdx
index a4e836e5d8..510d01aa49 100644
--- a/site/docs/components/date-picker/examples.mdx
+++ b/site/docs/components/date-picker/examples.mdx
@@ -9,7 +9,7 @@ data:
 ---
 
 <LivePreviewControls>
-<LivePreview componentName="date-picker" exampleName="Default">
+<LivePreview componentName="date-picker" exampleName="SingleSelect">
 
 ## Single select
 
@@ -21,6 +21,7 @@ The default date picker allows the user to pick a single date, which is committe
 ## With form field
 
 This date picker has a form field label and is configured with validation logic. If an invalid date is entered, the error is detected and a tooltip advises the user of the correct format.
+The default date picker format is "DD MMM YYYY"
 
 </LivePreview>
 <LivePreview componentName="date-picker" exampleName="Range">
@@ -28,5 +29,8 @@ This date picker has a form field label and is configured with validation logic.
 
 The Date Range Picker enables selection of start and end dates, using the input fields or two calendars displayed. The range is only committed when the user clicks ‘Apply’, and can be reset if the user wants to start again.
 
+</LivePreview>
+<LivePreview componentName="date-picker" exampleName="WithDisabledDates">
+## With disabled dates
 </LivePreview>
 </LivePreviewControls>
diff --git a/site/docs/components/date-picker/usage.mdx b/site/docs/components/date-picker/usage.mdx
index b3c26d4494..539438e958 100644
--- a/site/docs/components/date-picker/usage.mdx
+++ b/site/docs/components/date-picker/usage.mdx
@@ -16,7 +16,7 @@ Use a Date Picker when enabling users to filter data that’s displayed on scree
 
 ### Best practices
 
-To improve consistency and simplify your messaging, consider recommending just one acceptable date format in the label and/or tooltip – ideally, the one most frequently used in your application.
+To improve consistency and simplify your messaging, consider recommending just one acceptable date format in the form field label and helper text – ideally, the one most frequently used in your application.
 
 ## Import
 
diff --git a/site/src/examples/date-picker/Default.tsx b/site/src/examples/date-picker/SingleSelect.tsx
similarity index 72%
rename from site/src/examples/date-picker/Default.tsx
rename to site/src/examples/date-picker/SingleSelect.tsx
index f40a616a31..9cb86bb2fc 100644
--- a/site/src/examples/date-picker/Default.tsx
+++ b/site/src/examples/date-picker/SingleSelect.tsx
@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 import { DatePicker } from "@salt-ds/lab";
 
-export const Default = (): ReactElement => (
+export const SingleSelect = (): ReactElement => (
   <DatePicker style={{ width: "200px" }} />
 );
diff --git a/site/src/examples/date-picker/WithDisabledDates.tsx b/site/src/examples/date-picker/WithDisabledDates.tsx
new file mode 100644
index 0000000000..e4197eac1d
--- /dev/null
+++ b/site/src/examples/date-picker/WithDisabledDates.tsx
@@ -0,0 +1,13 @@
+import { ReactElement } from "react";
+import { DatePicker } from "@salt-ds/lab";
+import { DateValue, getDayOfWeek } from "@internationalized/date";
+
+const currentLocale = navigator.languages[0];
+const isDayDisabled = (date: DateValue) =>
+  getDayOfWeek(date, currentLocale) >= 5;
+export const WithDisabledDates = (): ReactElement => (
+  <DatePicker
+    style={{ width: "200px" }}
+    CalendarProps={{ isDayDisabled: isDayDisabled }}
+  />
+);
diff --git a/site/src/examples/date-picker/WithFormField.tsx b/site/src/examples/date-picker/WithFormField.tsx
index 018708c85c..9ad67cd23b 100644
--- a/site/src/examples/date-picker/WithFormField.tsx
+++ b/site/src/examples/date-picker/WithFormField.tsx
@@ -5,11 +5,12 @@ import {
   FormFieldHelperText as FormHelperText,
   FormFieldLabel as FormLabel,
 } from "@salt-ds/core";
+const helperText = "Date format DD MMM YYYY (e.g. 09 Jun 2021)";
 
 export const WithFormField = (): ReactElement => (
   <FormField style={{ width: "200px" }}>
     <FormLabel>Pick a date</FormLabel>
-    <DatePicker />
-    <FormHelperText>Date format DD MMM YYYY (e.g. 09 Jun 2021)</FormHelperText>
+    <DatePicker helperText={helperText} />
+    <FormHelperText>{helperText}</FormHelperText>
   </FormField>
 );
diff --git a/site/src/examples/date-picker/index.ts b/site/src/examples/date-picker/index.ts
index b81e5c2b63..c9de3ab1ee 100644
--- a/site/src/examples/date-picker/index.ts
+++ b/site/src/examples/date-picker/index.ts
@@ -1,3 +1,4 @@
-export * from "./Default";
+export * from "./SingleSelect";
 export * from "./WithFormField";
 export * from "./Range";
+export * from "./WithDisabledDates";