diff --git a/CHANGELOG.md b/CHANGELOG.md
index 99de65190b..64d2a2c8ca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,17 +7,19 @@
 ### 🛡 Security
 
 ### 📈 Features/Enhancements
-- Create Create OuiSimplifiedBreadcrumbs and update OuiHeaderBreadcrumbs ([#1374](https://github.com/opensearch-project/oui/pull/1374))
+
+- Add `compressed` to OuiDatePicker ([#1380](https://github.com/opensearch-project/oui/pull/1380))
 
 ### 🐛 Bug Fixes
 
-- Fix combobox appearance when compressed and in-group ([#1371](https://github.com/opensearch-project/oui/pull/1371))
-- Updates to v9 colors, button/input styles, and typography ([#1373](https://github.com/opensearch-project/oui/pull/1373))
+- Fix `compressed` styling of OuiDatePickerRange ([#1380](https://github.com/opensearch-project/oui/pull/1380))
 
 ### 🚞 Infrastructure
 
 ### 📝 Documentation
 
+- Add a playground for OuiDatePicker ([#1380](https://github.com/opensearch-project/oui/pull/1380))
+
 ### 🛠 Maintenance
 
 ### 🪛 Refactoring
@@ -25,6 +27,13 @@
 ### 🔩 Tests
 
 
+## [`1.12.0`](https://github.com/opensearch-project/oui/tree/1.12)
+
+### 🐛 Bug Fixes
+
+- Fix combobox appearance when compressed and in-group ([#1371](https://github.com/opensearch-project/oui/pull/1371))
+- Updates to v9 colors, button/input styles, and typography ([#1373](https://github.com/opensearch-project/oui/pull/1373))
+
 ## [`1.11.0`](https://github.com/opensearch-project/oui/tree/1.11)
 
 ### 📈 Features/Enhancements
@@ -32,7 +41,6 @@
 - Add new icons for workspaces ([#1365](https://github.com/opensearch-project/oui/pull/1365))
 - Add a property to control the gap between an icon and the content of OuiButton and OuiButtonEmpty ([#1367](https://github.com/opensearch-project/oui/pull/1367))
 
-
 ## [`1.10.0`](https://github.com/opensearch-project/oui/tree/1.10)
 
 ### 📈 Features/Enhancements
diff --git a/src-docs/src/views/date_picker/date_picker.js b/src-docs/src/views/date_picker/date_picker.js
index 74de002328..c8f03017a0 100644
--- a/src-docs/src/views/date_picker/date_picker.js
+++ b/src-docs/src/views/date_picker/date_picker.js
@@ -23,7 +23,7 @@ export default () => {
   };
 
   return (
-    <OuiFormRow label="Select a date">
+    <OuiFormRow label="Select a date" fullWidth>
       <OuiDatePicker selected={startDate} onChange={handleChange} />
     </OuiFormRow>
   );
diff --git a/src-docs/src/views/date_picker/date_picker_example.js b/src-docs/src/views/date_picker/date_picker_example.js
index 1b7d1c62d9..ba8d77e8d8 100644
--- a/src-docs/src/views/date_picker/date_picker_example.js
+++ b/src-docs/src/views/date_picker/date_picker_example.js
@@ -22,6 +22,8 @@ import {
   OuiDatePickerRange,
 } from '../../../../src/components';
 
+import { datePickerConfig } from './playground';
+
 import DatePicker from './date_picker';
 const datePickerSource = require('!!raw-loader!./date_picker');
 const datePickerHtml = renderToHtml(DatePicker);
@@ -231,6 +233,7 @@ export const DatePickerExample = {
       snippet: datePickerSnippet,
       demo: <DatePicker />,
       props: { OuiDatePicker },
+      playground: datePickerConfig,
     },
     {
       title: 'Date picker states',
diff --git a/src-docs/src/views/date_picker/playground.js b/src-docs/src/views/date_picker/playground.js
new file mode 100644
index 0000000000..3d1030ffa1
--- /dev/null
+++ b/src-docs/src/views/date_picker/playground.js
@@ -0,0 +1,73 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import { PropTypes } from 'react-view';
+import { OuiDatePicker } from '../../../../src/components/';
+import {
+  propUtilityForPlayground,
+  iconValidator,
+} from '../../services/playground';
+import moment from 'moment';
+
+export const datePickerConfig = () => {
+  const docgenInfo = Array.isArray(OuiDatePicker.__docgenInfo)
+    ? OuiDatePicker.__docgenInfo[0]
+    : OuiDatePicker.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.dateFormat = {
+    ...propsToUse.dateFormat,
+    type: PropTypes.String,
+  };
+
+  propsToUse.selected = {
+    ...propsToUse.selected,
+    type: PropTypes.Object,
+    value: 'moment()',
+    stateful: true,
+  };
+
+  propsToUse.onChange = {
+    ...propsToUse.onChange,
+    type: PropTypes.Function,
+    value: 'selected => setSelected(selected)',
+    propHook: {
+      what: 'selected',
+      into: 'selected',
+    },
+  };
+
+  propsToUse.iconType = iconValidator(propsToUse.iconType);
+
+  propsToUse.autoComplete = {
+    ...propsToUse.autoComplete,
+    hidden: true,
+  };
+
+  return {
+    config: {
+      componentName: 'OuiDatePicker',
+      props: propsToUse,
+      scope: {
+        OuiDatePicker,
+        moment,
+      },
+      imports: {
+        '@opensearch-project/oui': {
+          named: ['OuiDatePicker'],
+        },
+        moment: {
+          default: 'moment',
+        },
+      },
+    },
+  };
+};
diff --git a/src-docs/src/views/date_picker/range.js b/src-docs/src/views/date_picker/range.js
index eae4dbf787..24fa14a35f 100644
--- a/src-docs/src/views/date_picker/range.js
+++ b/src-docs/src/views/date_picker/range.js
@@ -14,35 +14,38 @@ import React, { useState } from 'react';
 import moment from 'moment';
 
 import { OuiDatePicker, OuiDatePickerRange } from '../../../../src/components';
+import { DisplayToggles } from '../form_controls/display_toggles';
 
 export default () => {
   const [startDate, setStartDate] = useState(moment());
   const [endDate, setEndDate] = useState(moment().add(11, 'd'));
 
   return (
-    <OuiDatePickerRange
-      startDateControl={
-        <OuiDatePicker
-          selected={startDate}
-          onChange={setStartDate}
-          startDate={startDate}
-          endDate={endDate}
-          isInvalid={startDate > endDate}
-          aria-label="Start date"
-          showTimeSelect
-        />
-      }
-      endDateControl={
-        <OuiDatePicker
-          selected={endDate}
-          onChange={setEndDate}
-          startDate={startDate}
-          endDate={endDate}
-          isInvalid={startDate > endDate}
-          aria-label="End date"
-          showTimeSelect
-        />
-      }
-    />
+    <DisplayToggles canDisabled={false} canLoading={false} canInvalid={false}>
+      <OuiDatePickerRange
+        startDateControl={
+          <OuiDatePicker
+            selected={startDate}
+            onChange={setStartDate}
+            startDate={startDate}
+            endDate={endDate}
+            isInvalid={startDate > endDate}
+            aria-label="Start date"
+            showTimeSelect
+          />
+        }
+        endDateControl={
+          <OuiDatePicker
+            selected={endDate}
+            onChange={setEndDate}
+            startDate={startDate}
+            endDate={endDate}
+            isInvalid={startDate > endDate}
+            aria-label="End date"
+            showTimeSelect
+          />
+        }
+      />
+    </DisplayToggles>
   );
 };
diff --git a/src-docs/src/views/date_picker/states.js b/src-docs/src/views/date_picker/states.js
index 69d12e7fdb..7dc1ccaafe 100644
--- a/src-docs/src/views/date_picker/states.js
+++ b/src-docs/src/views/date_picker/states.js
@@ -33,7 +33,7 @@ export default () => {
   return (
     /* DisplayToggles wrapper for Docs only */
     <div>
-      <DisplayToggles canCompressed={false}>
+      <DisplayToggles>
         <OuiDatePicker
           showTimeSelect
           selected={startDate}
diff --git a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
index 4f099375a0..8056621a7f 100644
--- a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
+++ b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
@@ -805,9 +805,11 @@ exports[`OuiDatePicker localization inherits locale from context 1`] = `
 
 exports[`OuiDatePicker popoverPlacement top-end is rendered 1`] = `
 <OuiDatePicker
+  accessibleMode={true}
   adjustDateOnChange={true}
   aria-label="aria-label"
   className="testClass1 testClass2"
+  compressed={false}
   data-test-subj="test subject string"
   dateFormat="MM/DD/YYYY"
   fullWidth={false}
@@ -817,8 +819,11 @@ exports[`OuiDatePicker popoverPlacement top-end is rendered 1`] = `
   shadow={true}
   shouldCloseOnSelect={true}
   showIcon={true}
+  showMonthDropdown={true}
   showTimeSelect={false}
+  showYearDropdown={true}
   timeFormat="hh:mm A"
+  yearDropdownItemNumber={7}
 >
   <span>
     <span
diff --git a/src/components/date_picker/_date_picker_range.scss b/src/components/date_picker/_date_picker_range.scss
index 769c3e9f86..5a6b469dab 100644
--- a/src/components/date_picker/_date_picker_range.scss
+++ b/src/components/date_picker/_date_picker_range.scss
@@ -15,6 +15,11 @@
 
 .ouiDatePickerRange {
   @include ouiFormControlSize(auto, $includeAlternates: true);
+
+  .ouiDatePicker.ouiFieldText--compressed {
+    height: $ouiFormControlLayoutGroupInputCompressedHeight;
+  }
+
   // Match just the regular drop shadow of inputs
   @include ouiFormControlDefaultShadow();
   display: flex;
diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx
index 468554e0fa..dcf8be94b4 100644
--- a/src/components/date_picker/date_picker.tsx
+++ b/src/components/date_picker/date_picker.tsx
@@ -110,9 +110,27 @@ interface OuiExtendedDatePickerProps extends ReactDatePickerProps {
    * Sets the placement of the popover. It accepts: `"bottom"`, `"bottom-end"`, `"bottom-start"`, `"left"`, `"left-end"`, `"left-start"`, `"right"`, `"right-end"`, `"right-start"`, `"top"`, `"top-end"`, `"top-start"`
    */
   popoverPlacement?: ReactDatePickerProps['popperPlacement'];
+
+  /**
+   * Reduces the size to a typical (compressed) input
+   */
+  compressed?: boolean;
 }
 
-type _OuiDatePickerProps = CommonProps & OuiExtendedDatePickerProps;
+type _OuiDatePickerProps = CommonProps &
+  Omit<
+    OuiExtendedDatePickerProps,
+    | 'monthsShown'
+    | 'showWeekNumbers'
+    | 'fixedHeight'
+    | 'dropdownMode'
+    | 'useShortMonthInDropdown'
+    | 'todayButton'
+    | 'timeCaption'
+    | 'disabledKeyboardNavigation'
+    | 'isClearable'
+    | 'withPortal'
+  >;
 
 export type OuiDatePickerProps = ApplyClassComponentDefaults<
   typeof OuiDatePicker
@@ -127,10 +145,15 @@ export class OuiDatePicker extends Component<_OuiDatePickerProps> {
     isLoading: false,
     shadow: true,
     shouldCloseOnSelect: true,
+    showMonthDropdown: true,
+    showYearDropdown: true,
+    yearDropdownItemNumber: 7,
+    accessibleMode: true,
     showIcon: true,
     showTimeSelect: false,
     timeFormat: ouiDatePickerDefaultTimeFormat,
     popoverPlacement: 'bottom-start',
+    compressed: false,
   };
 
   render() {
@@ -170,6 +193,7 @@ export class OuiDatePicker extends Component<_OuiDatePickerProps> {
       showTimeSelectOnly,
       timeFormat,
       utcOffset,
+      compressed,
       ...rest
     } = this.props;
 
@@ -186,6 +210,7 @@ export class OuiDatePicker extends Component<_OuiDatePickerProps> {
         'ouiFieldText-isLoading': isLoading,
         'ouiFieldText--withIcon': !inline && showIcon,
         'ouiFieldText-isInvalid': isInvalid,
+        'ouiFieldText--compressed': compressed,
       },
       className
     );
@@ -216,24 +241,34 @@ export class OuiDatePicker extends Component<_OuiDatePickerProps> {
     };
 
     if (
+      // @ts-ignore for guard against omitted prop
       // We don't want to show multiple months next to each other
       this.props.monthsShown ||
+      // @ts-ignore for guard against omitted prop
       // There is no need to show week numbers
       this.props.showWeekNumbers ||
+      // @ts-ignore for guard against omitted prop
       // Our css adapts to height, no need to fix it
       this.props.fixedHeight ||
+      // @ts-ignore for guard against omitted prop
       // We force the month / year selection UI. No need to configure it
       this.props.dropdownMode ||
+      // @ts-ignore for guard against omitted prop
       // Short month is unnecessary. Our UI has plenty of room for full months
       this.props.useShortMonthInDropdown ||
+      // @ts-ignore for guard against omitted prop
       // The today button is not needed. This should always be external to the calendar
       this.props.todayButton ||
+      // @ts-ignore for guard against omitted prop
       // We hide the time caption, so there is no need to overwrite its text
       this.props.timeCaption ||
+      // @ts-ignore for guard against omitted prop
       // We always want keyboard accessibility on
       this.props.disabledKeyboardNavigation ||
+      // @ts-ignore for guard against omitted prop
       // This is easy enough to do. It can conflict with isLoading state
       this.props.isClearable ||
+      // @ts-ignore for guard against omitted prop
       // There is no reason to launch the datepicker in its own modal. Can always build these ourselves
       this.props.withPortal
     ) {
diff --git a/src/components/date_picker/date_picker_range.tsx b/src/components/date_picker/date_picker_range.tsx
index 5214b2db2b..4bb171a857 100644
--- a/src/components/date_picker/date_picker_range.tsx
+++ b/src/components/date_picker/date_picker_range.tsx
@@ -109,6 +109,7 @@ export const OuiDatePickerRange: FunctionComponent<OuiDatePickerRangeProps> = ({
         readOnly: readOnly,
         iconType: typeof iconType === 'boolean' ? undefined : iconType,
         showIcon: !!iconType,
+        compressed,
       }
     );
 
@@ -119,6 +120,7 @@ export const OuiDatePickerRange: FunctionComponent<OuiDatePickerRangeProps> = ({
         fullWidth: fullWidth,
         readOnly: readOnly,
         popoverPlacement: 'bottom-end',
+        compressed,
       }
     );
   }