elastic · cee-chen · Dec 5, 2024 · Dec 13, 2024 · Dec 13, 2024 · Dec 13, 2024
@@ -1,3 +1,5 @@
+label: Date and time controls
+position: 6
 link:
   type: doc
   id: forms_date_picker
@@ -1,11 +1,12 @@
 ---
-slug: /forms/auto-refresh
-id: forms_auto_refresh
+slug: /forms/date-picker/auto-refresh
+id: forms_date_auto_refresh
+sidebar_position: 4
 ---
 
 # Auto refresh
 
-This is a component that is used by the [**EuiSuperDatePicker**](/docs/templates/super-date-picker) component to create an automatic refresh configuration. It merely provides a common UI pattern but the actual refresh counter is maintained by you. It `isPaused` by default and the `refreshInterval` is set in milliseconds.
+This is a component that is used by the [**EuiSuperDatePicker**](./super_date_picker.mdx) component to create an automatic refresh configuration. It merely provides a common UI pattern but the actual refresh counter is maintained by you. It `isPaused` by default and the `refreshInterval` is set in milliseconds.
 
 ```tsx interactive
 import React, { useState } from 'react';

@@ -1,11 +1,14 @@
 ---
 slug: /forms/date-picker
 id: forms_date_picker
+sidebar_position: 1
 ---
 
 # Date picker
 
-At its most bare the **EuiDatePicker** only requires props for `selected` and `onChange`. It depends on [moment](https://momentjs.com/docs/) for all of its formatting.
+**EuiDatePicker** is the foundational component that all other EUI date and time controls are built upon. It itself depends upon [moment](https://momentjs.com/docs/) for all of its formatting, and a forked and modified version of [react-datepicker](https://github.com/Hacker0x01/react-datepicker/tree/v2.0.0) for accessibility.
+
+At minimum, the **EuiDatePicker** requires the `selected` and `onChange` props to be passed.
 
 ```tsx interactive
 import React, { useState } from 'react';

@@ -1,11 +1,12 @@
 ---
 slug: /forms/date-picker/range
 id: forms_date_picker_range
+sidebar_position: 2
 ---
 
 # Date picker range
 
-To create a single date range control, use **EuiDatePickerRange** and pass individual [**EuiDatePicker**](../../date-picker) components into the `startDateControl` and `endDateControl` props. You can control the state of both inputs as direct props on **EuiDatePickerRange** as well as control each individually. Date specific props need to applied to the individual components.
+To create a single date range control, use **EuiDatePickerRange** and pass individual [**EuiDatePicker**](./date_picker.mdx) components into the `startDateControl` and `endDateControl` props. You can control the state of both inputs as direct props on **EuiDatePickerRange** as well as control each individually. Date specific props need to applied to the individual components.
 
 ```tsx interactive
 import React, { useState } from 'react';
@@ -47,7 +48,7 @@ export default () => {
 ```
 
 :::tip
-If you need even more functionality such as relative time, suggested date ranges, and refresh intervals, consider using [**EuiSuperDatePicker**](../../../templates/super-date-picker).
+If you need even more functionality such as relative time, suggested date ranges, and refresh intervals, consider using [**EuiSuperDatePicker**](./super_date_picker.mdx).
 :::
 
 ## Inline display

@@ -1,7 +1,7 @@
 ---
-title: Super date picker
-slug: /templates/super-date-picker
-id: templates_super_date_picker
+slug: /forms/date-picker/super
+id: forms_super_date_picker
+sidebar_position: 3
 ---
 
 # Super date picker
@@ -494,7 +494,7 @@ export default () => {
 
 Set `isAutoRefreshOnly` to `true` to limit the component to only display auto refresh content. This is useful in cases where there is no time data but auto-refresh configuration is still desired.
 
-However, since this is still the full **EuiSuperDatePicker** component it requires other props that may not be necessary for the refresh only UI. In this case, you can use the [**EuiAutoRefresh**](/docs/forms/auto-refresh) component directly. You will just need to manage the refresh counter yourself.
+However, since this is still the full **EuiSuperDatePicker** component it requires other props that may not be necessary for the refresh only UI. In this case, you can use the [**EuiAutoRefresh**](./auto_refresh.mdx) component directly. You will just need to manage the refresh counter yourself.
 
 ```tsx interactive
 import React, { useState } from 'react';