elastic · weronikaolejniczak · Feb 18, 2025 · Dec 5, 2024 · Dec 13, 2024 · Dec 13, 2024
@@ -76,3 +76,7 @@ searching is not possible when running the development server.
 Please refer to the [Building the website](#building-the-website) section
 to learn how to build the documentation site locally
 and serve it to use local search.
+
+## Links
+
+For external links, we use `<a>` tag to open them in a new tab, while for internal links (between documentation pages) we use [relative file paths](https://docusaurus.io/docs/markdown-features/links) as recommended by Docusaurus. 
@@ -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 <a href="https://momentjs.com/docs/" target="_blank">moment</a> for all of its formatting, and a forked and modified version of <a href="https://github.com/Hacker0x01/react-datepicker/tree/v2.0.0" target="_blank">react-datepicker</a> for accessibility.
+
+At minimum, the **EuiDatePicker** requires the `selected` and `onChange` props to be passed.
 
 ```tsx interactive
 import React, { useState } from 'react';
@@ -148,7 +151,7 @@ export default () => {
 
 ## Locale
 
-Locale formatting is achieved by using the `locale`,`timeFormat`, and `dateFormat` props. The latter will take any `moment()` notation. Check [Date format by country](https://en.wikipedia.org/wiki/Date_format_by_country) for formatting examples.
+Locale formatting is achieved by using the `locale`,`timeFormat`, and `dateFormat` props. The latter will take any `moment()` notation. Check <a href="https://en.wikipedia.org/wiki/Date_format_by_country" target="_blank">Date format by country</a> for formatting examples.
 
 :::warning
 Moment will try to load the locale on demand when it is used. Bundlers that do not support dynamic require statements will need to explicitly import the locale, e.g. `import 'moment/locale/zh-cn'`. See the below demo JS for examples.
@@ -224,56 +227,6 @@ export default () => {
 };
 ```
 
-### Dynamic `minDate` and `maxDate`
-
-By using `minDate` and `maxDate`, and updating the values based on `startDate` and `endDate`, users get immediate feedback on what range values are allowed.
-
-```tsx interactive
-import React, { useState } from 'react';
-import { EuiDatePicker, EuiDatePickerRange } from '@elastic/eui';
-import moment from 'moment';
-
-export default () => {
-  const minDate = moment().subtract(2, 'y');
-  const maxDate = moment();
-  const [startDate, setStartDate] = useState(minDate);
-  const [endDate, setEndDate] = useState(maxDate);
-
-  const isInvalid =
-    startDate > endDate || startDate < minDate || endDate > maxDate;
-
-  return (
-    <EuiDatePickerRange
-      isInvalid={isInvalid}
-      startDateControl={
-        <EuiDatePicker
-          selected={startDate}
-          onChange={(date) => date && setStartDate(date)}
-          startDate={startDate}
-          endDate={endDate}
-          minDate={minDate}
-          maxDate={endDate}
-          aria-label="Start date"
-          showTimeSelect
-        />
-      }
-      endDateControl={
-        <EuiDatePicker
-          selected={endDate}
-          onChange={(date) => date && setEndDate(date)}
-          startDate={startDate}
-          endDate={endDate}
-          minDate={startDate}
-          maxDate={maxDate}
-          aria-label="End date"
-          showTimeSelect
-        />
-      }
-    />
-  );
-};
-```
-
 ## Only allow specific dates and times
 
 Use the `minDate`,`maxDate`,`minTime`, and `maxTime`props to specify specific ranges the `selected` code must must fall into. You can also use the `excludeDates` and`excludeTimes` property to disallow a specific array of items from selection.

@@ -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
@@ -118,6 +119,56 @@ export default () => {
 };
 ```
 
+### Dynamic `minDate` and `maxDate`
+
+By using `minDate` and `maxDate`, and updating the values based on `startDate` and `endDate`, users get immediate feedback on what range values are allowed.
+
+```tsx interactive
+import React, { useState } from 'react';
+import { EuiDatePicker, EuiDatePickerRange } from '@elastic/eui';
+import moment from 'moment';
+
+export default () => {
+  const minDate = moment().subtract(2, 'y');
+  const maxDate = moment();
+  const [startDate, setStartDate] = useState(minDate);
+  const [endDate, setEndDate] = useState(maxDate);
+
+  const isInvalid =
+    startDate > endDate || startDate < minDate || endDate > maxDate;
+
+  return (
+    <EuiDatePickerRange
+      isInvalid={isInvalid}
+      startDateControl={
+        <EuiDatePicker
+          selected={startDate}
+          onChange={(date) => date && setStartDate(date)}
+          startDate={startDate}
+          endDate={endDate}
+          minDate={minDate}
+          maxDate={endDate}
+          aria-label="Start date"
+          showTimeSelect
+        />
+      }
+      endDateControl={
+        <EuiDatePicker
+          selected={endDate}
+          onChange={(date) => date && setEndDate(date)}
+          startDate={startDate}
+          endDate={endDate}
+          minDate={startDate}
+          maxDate={maxDate}
+          aria-label="End date"
+          showTimeSelect
+        />
+      }
+    />
+  );
+};
+```
+
 ## Props
 
 import docgen from '@elastic/eui-docgen/dist/components/date_picker';

@@ -1,14 +1,14 @@
 ---
-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
 
 **EuiSuperDatePicker** is a complex date picker that supports relative and absolute dates. It offers a convenient **Quick select menu** which includes **Commonly used dates**, **Recently used date ranges** and **Auto refresh** features.
 
-Pass `start` and `end` date times as strings in either datemath format (e.g.: `now`, `now-15m`, `now-15m/m`) or as absolute date in the format `YYYY-MM-DDTHH:mm:ss.SSSZ`. Use [datemath](https://github.com/elastic/datemath-js) to convert start and end strings into moment objects.
+Pass `start` and `end` date times as strings in either datemath format (e.g.: `now`, `now-15m`, `now-15m/m`) or as absolute date in the format `YYYY-MM-DDTHH:mm:ss.SSSZ`. Use <a href="https://github.com/elastic/datemath-js" target="_blank">datemath</a> to convert start and end strings into moment objects.
 
 ```
 import dateMath from '@elastic/datemath';
@@ -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';
@@ -549,7 +549,7 @@ export default () => {
 
 ## Elastic pattern with KQL
 
-The following is a demo pattern of how to layout the **EuiSuperDatePicker** alongside Elastic's KQL search bar using [**EuiSearchBar**](/docs/forms/search-bar) and shrinking to fit when the search bar is in focus.
+The following is a demo pattern of how to layout the **EuiSuperDatePicker** alongside Elastic's KQL search bar using [**EuiSearchBar**](../search_filter/search_bar.mdx) and shrinking to fit when the search bar is in focus.
 
 ```tsx interactive
 import React, { useState } from 'react';
@@ -668,7 +668,7 @@ export default () => {
 
 ## Locale
 
-Locale formatting is achieved by using the `locale`,`timeFormat`, and `dateFormat` props. The latter will take any `moment()` notation. Check [Date format by country](https://en.wikipedia.org/wiki/Date_format_by_country) for formatting examples.
+Locale formatting is achieved by using the `locale`,`timeFormat`, and `dateFormat` props. The latter will take any `moment()` notation. Check <a href="https://en.wikipedia.org/wiki/Date_format_by_country" target="_blank">Date format by country</a> for formatting examples.
 
 :::warning
 Moment will try to load the locale on demand when it is used. Bundlers that do not support dynamic require statements will need to explicitly import the locale, e.g. `import 'moment/locale/zh-cn'`. See the below demo TSX for examples.