[EuiDatePickerRange][EuiSuperDatePicker] Convert to dogfood EuiFormControlLayoutDelimited

src-docs/src/views/date_picker/range.tsx

@@ -10,7 +10,7 @@ export default () => {
 
   return (
     /* DisplayToggles wrapper for Docs only */
-    <DisplayToggles canCompressed={false} canLoading={false}>
+    <DisplayToggles canCompressed={false}>
       <EuiDatePickerRange
         isInvalid={startDate > endDate}
         startDateControl={

src-docs/src/views/form_controls/form_control_layout_range.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {
   EuiFormControlLayoutDelimited,
   EuiFormLabel,
+  EuiFieldNumber,
   EuiIcon,
 } from '../../../../src/components';
 
@@ -218,5 +219,49 @@ export default () => (
         />
       }
     />
+
+    <EuiFormControlLayoutDelimited
+      isDisabled
+      prepend={<EuiFormLabel>Disabled</EuiFormLabel>}
+      startControl={
+        <input
+          type="number"
+          placeholder="0"
+          className="euiFieldNumber"
+          disabled
+          aria-label="Use aria labels when no actual label is in use"
+        />
+      }
+      endControl={
+        <input
+          type="number"
+          placeholder="100"
+          className="euiFieldNumber"
+          disabled
+          aria-label="Use aria labels when no actual label is in use"
+        />
+      }
+    />
+
+    <EuiFormControlLayoutDelimited
+      isInvalid
+      prepend={<EuiFormLabel>Invalid</EuiFormLabel>}
+      startControl={
+        <EuiFieldNumber
+          isInvalid
+          controlOnly
+          placeholder="0"
+          aria-label="Use aria labels when no actual label is in use"
+        />
+      }
+      endControl={
+        <EuiFieldNumber
+          isInvalid
+          controlOnly
+          placeholder="100"
+          aria-label="Use aria labels when no actual label is in use"
+        />
+      }
+    />
   </div>
 );

src-docs/src/views/super_date_picker/playground.js

@@ -18,6 +18,20 @@ export const superDatePickerConfig = () => {
   propsToUse.onTimeChange = simulateFunction(propsToUse.onTimeChange, true);
   propsToUse.onRefreshChange = simulateFunction(propsToUse.onRefreshChange);
 
+  propsToUse.isPaused = {
+    ...propsToUse.isPaused,
+    type: PropTypes.Boolean,
+    defaultValue: true,
+    value: true,
+  };
+
+  propsToUse.showUpdateButton = {
+    ...propsToUse.showUpdateButton,
+    type: PropTypes.Boolean,
+    defaultValue: true,
+    value: true,
+  };
+
   propsToUse.locale = {
     ...propsToUse.locale,
     type: PropTypes.String,