-
Notifications
You must be signed in to change notification settings - Fork 841
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Split up EuiDatePicker and EuiDatePickerRange
- Loading branch information
Showing
3 changed files
with
130 additions
and
74 deletions.
There are no files selected for viewing
3 changes: 3 additions & 0 deletions
3
packages/website/docs/components/forms/date_picker/_category_.yml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| link: | ||
| type: doc | ||
| id: forms_date_picker |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
125 changes: 125 additions & 0 deletions
125
packages/website/docs/components/forms/date_picker/date_picker_range.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| --- | ||
| slug: /forms/date-picker/range | ||
| id: forms_date_picker_range | ||
| --- | ||
|
|
||
| # 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. | ||
|
|
||
| ```tsx interactive | ||
| import React, { useState } from 'react'; | ||
| import { EuiDatePicker, EuiDatePickerRange } from '@elastic/eui'; | ||
| import moment from 'moment'; | ||
|
|
||
| export default () => { | ||
| const [startDate, setStartDate] = useState(moment()); | ||
| const [endDate, setEndDate] = useState(moment().add(11, 'd')); | ||
|
|
||
| return ( | ||
| /* DisplayToggles wrapper for Docs only */ | ||
| <DisplayToggles canPrepend={true} canAppend={true}> | ||
| <EuiDatePickerRange | ||
| startDateControl={ | ||
| <EuiDatePicker | ||
| selected={startDate} | ||
| onChange={(date) => date && setStartDate(date)} | ||
| startDate={startDate} | ||
| endDate={endDate} | ||
| aria-label="Start date" | ||
| showTimeSelect | ||
| /> | ||
| } | ||
| endDateControl={ | ||
| <EuiDatePicker | ||
| selected={endDate} | ||
| onChange={(date) => date && setEndDate(date)} | ||
| startDate={startDate} | ||
| endDate={endDate} | ||
| aria-label="End date" | ||
| showTimeSelect | ||
| /> | ||
| } | ||
| /> | ||
| </DisplayToggles> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| :::tip | ||
| If you need even more functionality such as relative time, suggested date ranges, and refresh intervals, consider using [**EuiSuperDatePicker**](../../../templates/super-date-picker). | ||
| ::: | ||
|
|
||
| ## Inline display | ||
|
|
||
| Use the `inline` prop to display the date picker directly in the page instead of inside a popover. If you do not need the default inline shadow effect, apply the `shadow={false}` prop. | ||
|
|
||
| ```tsx interactive | ||
| import React, { useState } from 'react'; | ||
| import { | ||
| EuiDatePicker, | ||
| EuiDatePickerRange, | ||
| EuiFlexGroup, | ||
| EuiSwitch, | ||
| EuiSpacer, | ||
| } from '@elastic/eui'; | ||
| import moment from 'moment'; | ||
|
|
||
| export default () => { | ||
| const [shadow, setShadow] = useState(true); | ||
| const [showTimeSelect, setShowTimeSelect] = useState(false); | ||
|
|
||
| const [startDate, setStartDate] = useState(moment()); | ||
| const [endDate, setEndDate] = useState(moment().add(11, 'd')); | ||
|
|
||
| return ( | ||
| <> | ||
| <EuiFlexGroup> | ||
| <EuiSwitch | ||
| label="Show shadow" | ||
| checked={shadow} | ||
| onChange={() => setShadow((toggle) => !toggle)} | ||
| /> | ||
| <EuiSwitch | ||
| label="Show time select" | ||
| checked={showTimeSelect} | ||
| onChange={() => setShowTimeSelect((toggle) => !toggle)} | ||
| /> | ||
| </EuiFlexGroup> | ||
| <EuiSpacer /> | ||
| <DisplayToggles spacerSize="s" canCompressed={false} canFullWidth={false}> | ||
| <EuiDatePickerRange | ||
| inline | ||
| shadow={shadow} | ||
| startDateControl={ | ||
| <EuiDatePicker | ||
| aria-label="Start date" | ||
| selected={startDate} | ||
| onChange={(date) => date && setStartDate(date)} | ||
| startDate={startDate} | ||
| endDate={endDate} | ||
| showTimeSelect={showTimeSelect} | ||
| /> | ||
| } | ||
| endDateControl={ | ||
| <EuiDatePicker | ||
| aria-label="End date" | ||
| selected={endDate} | ||
| onChange={(date) => date && setEndDate(date)} | ||
| startDate={startDate} | ||
| endDate={endDate} | ||
| showTimeSelect={showTimeSelect} | ||
| /> | ||
| } | ||
| /> | ||
| </DisplayToggles> | ||
| </> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| import docgen from '@elastic/eui-docgen/dist/components/date_picker'; | ||
|
|
||
| <PropTable definition={docgen.EuiDatePickerRange} /> |