diff --git a/packages/react-core/src/demos/DatePicker/DatePicker.md b/packages/react-core/src/demos/DatePicker/DatePicker.md
index 9cefac31504..16dcf03039c 100644
--- a/packages/react-core/src/demos/DatePicker/DatePicker.md
+++ b/packages/react-core/src/demos/DatePicker/DatePicker.md
@@ -1,5 +1,5 @@
 ---
-id: Date range picker
+id: Date picker
 section: components
 subsection: date-and-time
 beta: true
@@ -59,95 +59,7 @@ DateRangePicker = () => {
 };
 ```
 
-### Date and time range picker
 
-```js
-import {
-  Flex,
-  FlexItem,
-  InputGroup,
-  DatePicker,
-  isValidDate,
-  TimePicker,
-  yyyyMMddFormat,
-  updateDateTime
-} from '@patternfly/react-core';
-
-DateTimeRangePicker = () => {
-  const [from, setFrom] = React.useState();
-  const [to, setTo] = React.useState();
-
-  const toValidator = (date) => {
-    return isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from)
-      ? ''
-      : 'The "to" date must be after the "from" date';
-  };
-
-  const onFromDateChange = (_event, inputDate, newFromDate) => {
-    if (isValidDate(from) && isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
-      newFromDate.setHours(from.getHours());
-      newFromDate.setMinutes(from.getMinutes());
-    }
-    if (isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
-      setFrom(new Date(newFromDate));
-    }
-  };
-
-  const onFromTimeChange = (_event, time, hour, minute) => {
-    if (isValidDate(from)) {
-      const updatedFromDate = new Date(from);
-      updatedFromDate.setHours(hour);
-      updatedFromDate.setMinutes(minute);
-      setFrom(updatedFromDate);
-    }
-  };
-
-  const onToDateChange = (_event, inputDate, newToDate) => {
-    if (isValidDate(to) && isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
-      newToDate.setHours(to.getHours());
-      newToDate.setMinutes(to.getMinutes());
-    }
-    if (isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
-      setTo(newToDate);
-    }
-  };
-
-  const onToTimeChange = (_event, time, hour, minute) => {
-    if (isValidDate(to)) {
-      const updatedToDate = new Date(to);
-      updatedToDate.setHours(hour);
-      updatedToDate.setMinutes(minute);
-      setTo(updatedToDate);
-    }
-  };
-
-  return (
-    <Flex direction={{ default: 'column', lg: 'row' }}>
-      <FlexItem>
-        <InputGroup>
-          <DatePicker onChange={onFromDateChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
-          <TimePicker aria-label="Start time" style={{ width: '150px' }} onChange={onFromTimeChange} />
-        </InputGroup>
-      </FlexItem>
-      <FlexItem>to</FlexItem>
-      <FlexItem>
-        <InputGroup>
-          <DatePicker
-            value={isValidDate(to) ? yyyyMMddFormat(to) : to}
-            onChange={onToDateChange}
-            isDisabled={!isValidDate(from)}
-            rangeStart={from}
-            validators={[toValidator]}
-            aria-label="End date"
-            placeholder="YYYY-MM-DD"
-          />
-          <TimePicker style={{ width: '150px' }} onChange={onToTimeChange} isDisabled={!isValidDate(from)} />
-        </InputGroup>
-      </FlexItem>
-    </Flex>
-  );
-};
-```
 
 ### Date and time pickers in modal
 
diff --git a/packages/react-core/src/demos/DateTimePicker.md b/packages/react-core/src/demos/DateTimePicker.md
index 3c3532e0984..337236bfcba 100644
--- a/packages/react-core/src/demos/DateTimePicker.md
+++ b/packages/react-core/src/demos/DateTimePicker.md
@@ -22,3 +22,93 @@ In this demo, learn how to use a [CalendarMonth](/components/calendar-month) com
 ```ts file="./examples/DateTimePicker/DateTimePicker.tsx"
 
 ```
+
+### Date and time range picker
+
+```js
+import {
+  Flex,
+  FlexItem,
+  InputGroup,
+  DatePicker,
+  isValidDate,
+  TimePicker,
+  yyyyMMddFormat,
+  updateDateTime
+} from '@patternfly/react-core';
+
+DateTimeRangePicker = () => {
+  const [from, setFrom] = React.useState();
+  const [to, setTo] = React.useState();
+
+  const toValidator = (date) => {
+    return isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from)
+      ? ''
+      : 'The "to" date must be after the "from" date';
+  };
+
+  const onFromDateChange = (_event, inputDate, newFromDate) => {
+    if (isValidDate(from) && isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
+      newFromDate.setHours(from.getHours());
+      newFromDate.setMinutes(from.getMinutes());
+    }
+    if (isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
+      setFrom(new Date(newFromDate));
+    }
+  };
+
+  const onFromTimeChange = (_event, time, hour, minute) => {
+    if (isValidDate(from)) {
+      const updatedFromDate = new Date(from);
+      updatedFromDate.setHours(hour);
+      updatedFromDate.setMinutes(minute);
+      setFrom(updatedFromDate);
+    }
+  };
+
+  const onToDateChange = (_event, inputDate, newToDate) => {
+    if (isValidDate(to) && isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
+      newToDate.setHours(to.getHours());
+      newToDate.setMinutes(to.getMinutes());
+    }
+    if (isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
+      setTo(newToDate);
+    }
+  };
+
+  const onToTimeChange = (_event, time, hour, minute) => {
+    if (isValidDate(to)) {
+      const updatedToDate = new Date(to);
+      updatedToDate.setHours(hour);
+      updatedToDate.setMinutes(minute);
+      setTo(updatedToDate);
+    }
+  };
+
+  return (
+    <Flex direction={{ default: 'column', lg: 'row' }}>
+      <FlexItem>
+        <InputGroup>
+          <DatePicker onChange={onFromDateChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
+          <TimePicker aria-label="Start time" style={{ width: '150px' }} onChange={onFromTimeChange} />
+        </InputGroup>
+      </FlexItem>
+      <FlexItem>to</FlexItem>
+      <FlexItem>
+        <InputGroup>
+          <DatePicker
+            value={isValidDate(to) ? yyyyMMddFormat(to) : to}
+            onChange={onToDateChange}
+            isDisabled={!isValidDate(from)}
+            rangeStart={from}
+            validators={[toValidator]}
+            aria-label="End date"
+            placeholder="YYYY-MM-DD"
+          />
+          <TimePicker style={{ width: '150px' }} onChange={onToTimeChange} isDisabled={!isValidDate(from)} />
+        </InputGroup>
+      </FlexItem>
+    </Flex>
+  );
+};
+```
\ No newline at end of file