From 495d748f5d474b6a7315d23834a1a72f9a0e13f4 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 9 Sep 2024 14:50:41 -0700
Subject: [PATCH 1/5] first pass
---
.../getting-started/getting-started.md | 99 +++++++------------
.../PickersInstallationInstructions.js | 1 -
2 files changed, 37 insertions(+), 63 deletions(-)
diff --git a/docs/data/date-pickers/getting-started/getting-started.md b/docs/data/date-pickers/getting-started/getting-started.md
index 4c04e87bd78c..5e169baf2491 100644
--- a/docs/data/date-pickers/getting-started/getting-started.md
+++ b/docs/data/date-pickers/getting-started/getting-started.md
@@ -1,34 +1,38 @@
---
productId: x-date-pickers
-title: Date and Time Picker - Getting started
+title: Date and Time Pickers - Getting started
packageName: '@mui/x-date-pickers'
githubLabel: 'component: pickers'
materialDesign: https://m2.material.io/components/date-pickers
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/
---
-# Date and Time Pickers - Getting Started
+# Date and Time Pickers - Getting started
-Get started with the Date and Time Pickers. Install the package, configure your application and start using the components.
+Install the Date and Time Pickers and set up your date library to start building.
## Installation
-Using your favorite package manager, install:
+Install the base package (which can either be the free Community version or the paid Pro version) along with a required third-party date library.
+The Pickers currently support [Day.js](https://day.js.org/), [date-fns](https://date-fns.org/), [Luxon](https://moment.github.io/luxon/#/), and [Moment.js](https://momentjs.com/).
-- `@mui/x-date-pickers` for the free community version or `@mui/x-date-pickers-pro` for the commercial version.
-- The date library to manipulate the date.
+Choose your packages and manager through the toggles below, then run the commands as provided to install:
{{"component": "modules/components/PickersInstallationInstructions.js"}}
-:::info
-If you need more information about the date library supported by the Date and Time Pickers,
-take a look at the [dedicated section](/x/react-date-pickers/base-concepts/#date-library)
+:::success
+Not sure which date library to choose?
+If you're starting from scratch with no other date libraries in your app, we recommend Day.js because of its small bundle size.
:::
-The Date and Time Pickers package has a peer dependency on `@mui/material`.
-If you are not already using it in your project, you can install it with:
+### Peer dependencies
+
+#### Material UI
+
+The Date and Time Pickers have a peer dependency on `@mui/material`.
+If you're not already using it, install it with the following command:
@@ -46,9 +50,11 @@ yarn add @mui/material @emotion/react @emotion/styled
+#### React
+
-Please note that [react](https://www.npmjs.com/package/react) and [react-dom](https://www.npmjs.com/package/react-dom) are peer dependencies too:
+[`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) are also peer dependencies:
```json
"peerDependencies": {
@@ -56,71 +62,40 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht
"react-dom": "^17.0.0 || ^18.0.0"
},
```
+## Date library adapter setup
-### Style engine
-
-Material UI is using [Emotion](https://emotion.sh/docs/introduction) as a styling engine by default. If you want to use [`styled-components`](https://styled-components.com/) instead, run:
+To integrate your chosen date library, you'll need to plug the corresponding adapter into a `LocalizationProvider` that wraps your Picker components.
-
+Adapters are provided for each of the supported libraries, and all are exported by both `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`—for example,`AdapterDayjs`, which is used throughout this documentation for [Day.js](https://day.js.org/) integration:
-```bash npm
-npm install @mui/styled-engine-sc styled-components
+```tsx
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
```
-```bash pnpm
-pnpm add @mui/styled-engine-sc styled-components
-```
-
-```bash yarn
-yarn add @mui/styled-engine-sc styled-components
-```
-
-
+### LocalizationProvider
-Take a look at the [Styled engine guide](/material-ui/integrations/styled-components/) for more information about how to configure `styled-components` as the style engine.
+The `LocalizationProvider` component is exported by both `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`:
-## Setup your date library adapter
-
-Before trying to render any component, you have to make sure that there is a `LocalizationProvider` upper in the React tree.
-This component receives your chosen [date library's adapter](https://mui.com/x/react-date-pickers/#date-library) (the doc uses `AdapterDayjs` which is based on [dayjs](https://day.js.org/)) and makes it accessible to all the Date and Time Pickers component using React context.
-
-Each demonstration in the documentation has its own `LocalizationProvider` wrapper.
-This is **not** a pattern to reproduce.
-The reason is to keep examples atomic and functional, especially when running in a CodeSandbox.
+```tsx
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
+```
-The general recommendation is to declare the `LocalizationProvider` once, wrapping your entire application.
-Then, you don't need to repeat the boilerplate code for every Date and Time Picker in your application.
+:::warning
+For practical purposes, each demo in the documentation has its own `LocalizationProvider` wrapper.
+**We _do not_ recommend reproducing this pattern as-is.**
+For almost all use cases, you should wrap your entire app with a single `LocalizationProvider` to avoid the need to repeat boilerplate code in multiple places.
+:::
{{"component": "modules/components/PickersRenderingInstructions.js"}}
-:::success
-
-- All the adapters are exported by both `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`:
-
- ```tsx
- import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
- import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
- ```
-
-- `LocalizationProvider` is exported by both `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`:
-
- ```tsx
- import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
- import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
- ```
-
-:::
-
:::info
-If you need to use the Date and Time Pickers with a custom locale, have a look at the [Localized dates](/x/react-date-pickers/adapters-locale/) page.
+To use the Date and Time Pickers with a custom locale, see [Date and format localization](/x/react-date-pickers/adapters-locale/).
:::
## Render your first component
-To make sure that everything is set up correctly, try rendering a simple `DatePicker` component:
+To confirm that everything is set up correctly, try rendering a basic Date Picker component:
{{"demo": "FirstComponent.js"}}
-
-## What's next?
-
-Continue to the [next page](/x/react-date-pickers/base-concepts/) and discover the components available and how to use them.
diff --git a/docs/src/modules/components/PickersInstallationInstructions.js b/docs/src/modules/components/PickersInstallationInstructions.js
index 2651d0ca1158..1282d02797a6 100644
--- a/docs/src/modules/components/PickersInstallationInstructions.js
+++ b/docs/src/modules/components/PickersInstallationInstructions.js
@@ -10,7 +10,6 @@ const packages = {
const peerDependency = {
label: 'Date library',
- installationComment: '// Install date library (if not already installed)',
packages: ['dayjs', 'date-fns', 'luxon', 'moment'],
};
From add9260b7b60ea736460c56ebda3180d7599faad Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 9 Sep 2024 14:55:57 -0700
Subject: [PATCH 2/5] prettier
---
docs/data/date-pickers/getting-started/getting-started.md | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/docs/data/date-pickers/getting-started/getting-started.md b/docs/data/date-pickers/getting-started/getting-started.md
index 5e169baf2491..3e455767bbd9 100644
--- a/docs/data/date-pickers/getting-started/getting-started.md
+++ b/docs/data/date-pickers/getting-started/getting-started.md
@@ -62,9 +62,10 @@ yarn add @mui/material @emotion/react @emotion/styled
"react-dom": "^17.0.0 || ^18.0.0"
},
```
+
## Date library adapter setup
-To integrate your chosen date library, you'll need to plug the corresponding adapter into a `LocalizationProvider` that wraps your Picker components.
+To integrate your chosen date library with the Date and Time Pickers, you'll need to plug the corresponding adapter into a `LocalizationProvider` that wraps your Picker components.
Adapters are provided for each of the supported libraries, and all are exported by both `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`—for example,`AdapterDayjs`, which is used throughout this documentation for [Day.js](https://day.js.org/) integration:
From 326cd04d58804e244cd5421951351898a52c32dc Mon Sep 17 00:00:00 2001
From: Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Tue, 10 Sep 2024 09:39:21 -0400
Subject: [PATCH 3/5] Update
docs/data/date-pickers/getting-started/getting-started.md
Co-authored-by: Ale <93217218+alelthomas@users.noreply.github.com>
Signed-off-by: Sycamore <71297412+samuelsycamore@users.noreply.github.com>
---
docs/data/date-pickers/getting-started/getting-started.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/data/date-pickers/getting-started/getting-started.md b/docs/data/date-pickers/getting-started/getting-started.md
index 3e455767bbd9..7ae15087e30f 100644
--- a/docs/data/date-pickers/getting-started/getting-started.md
+++ b/docs/data/date-pickers/getting-started/getting-started.md
@@ -86,7 +86,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvid
:::warning
For practical purposes, each demo in the documentation has its own `LocalizationProvider` wrapper.
**We _do not_ recommend reproducing this pattern as-is.**
-For almost all use cases, you should wrap your entire app with a single `LocalizationProvider` to avoid the need to repeat boilerplate code in multiple places.
+For almost all use cases, you should wrap your entire app with a single `LocalizationProvider` to avoid repeating boilerplate code in multiple places.
:::
{{"component": "modules/components/PickersRenderingInstructions.js"}}
From 2f0471701176cfd3d5c2bee34011abd2515dd40d Mon Sep 17 00:00:00 2001
From: Michel Engelen <32863416+michelengelen@users.noreply.github.com>
Date: Tue, 17 Sep 2024 16:37:56 +0200
Subject: [PATCH 4/5] Update
docs/data/date-pickers/getting-started/getting-started.md
Co-authored-by: Lukas Tyla
Signed-off-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com>
---
docs/data/date-pickers/getting-started/getting-started.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/data/date-pickers/getting-started/getting-started.md b/docs/data/date-pickers/getting-started/getting-started.md
index 7ae15087e30f..18e8910804b1 100644
--- a/docs/data/date-pickers/getting-started/getting-started.md
+++ b/docs/data/date-pickers/getting-started/getting-started.md
@@ -29,7 +29,7 @@ If you're starting from scratch with no other date libraries in your app, we rec
### Peer dependencies
-#### Material UI
+#### Material UI
The Date and Time Pickers have a peer dependency on `@mui/material`.
If you're not already using it, install it with the following command:
From 3b258d6f33493ebb6396c8b0625dbf0bbb57813d Mon Sep 17 00:00:00 2001
From: Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Wed, 18 Sep 2024 19:15:36 -0400
Subject: [PATCH 5/5] Apply suggestions from code review
Co-authored-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com>
Signed-off-by: Sycamore <71297412+samuelsycamore@users.noreply.github.com>
---
docs/data/date-pickers/getting-started/getting-started.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/data/date-pickers/getting-started/getting-started.md b/docs/data/date-pickers/getting-started/getting-started.md
index 18e8910804b1..e57e07a9de80 100644
--- a/docs/data/date-pickers/getting-started/getting-started.md
+++ b/docs/data/date-pickers/getting-started/getting-started.md
@@ -9,7 +9,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepick
# Date and Time Pickers - Getting started
-Install the Date and Time Pickers and set up your date library to start building.
+Install the Date and Time Pickers package and set up your date library to start building.
## Installation