Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs][pickers] Dash usage revision #14260

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/data/date-pickers/adapters-locale/adapters-locale.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ packageName: '@mui/x-date-pickers'

## Getting started

The default locale of MUI X is English (United States). If you want to use other localesfollow the instructions below.
The default locale of MUI X is English (United States). If you want to use other locales, follow the instructions below.

:::warning
This page focuses on date format localization.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,7 @@ You can pass a custom component to replace the month button, as shown below:

## Arrow switcher

The following slots let you customize how to render the buttons and icons for an arrow switcher component—the component
The following slots let you customize how to render the buttons and icons for an arrow switcher: the component used
to navigate to the "Previous" and "Next" steps of the picker: `PreviousIconButton`, `NextIconButton`, `LeftArrowIcon`, `RightArrowIcon`.

### Component props
Expand Down
2 changes: 1 addition & 1 deletion docs/data/date-pickers/getting-started/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ This component receives your chosen [date library's adapter](https://mui.com/x/r

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 functionalespecially when running in a CodeSandbox.
The reason is to keep examples atomic and functional, especially when running in a CodeSandbox.

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.
Expand Down
46 changes: 23 additions & 23 deletions docs/data/date-pickers/validation/validation.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,29 +19,29 @@ But the same props are available on:

- all the other variants of this picker;

For examplethe validation props showcased with `DatePicker` are also available on:
For example, the validation props showcased with `DatePicker` are also available on:

- `DesktopDatePicker`
- `MobileDatePicker`
- `StaticDatePicker`

- the field used by this picker;

For examplethe validation props showcased with `DatePicker` are also available on `DateField`.
For example, the validation props showcased with `DatePicker` are also available on `DateField`.

- the view components;

For examplethe validation props showcased with `TimePicker` are also available on `TimeClock` and `DigitalClock`.
For example, the validation props showcased with `TimePicker` are also available on `TimeClock` and `DigitalClock`.

:::

## Invalid values feedback

On the fieldit enables its error state.
On the field, it enables its error state.

{{"demo": "ValidationBehaviorInput.js", "defaultCodeOpen": false}}

On the calendar and clock viewsthe invalid values are displayed as disabled to prevent their selection.
On the calendar and clock views, the invalid values are displayed as disabled to prevent their selection.

{{"demo": "ValidationBehaviorView.js", "defaultCodeOpen": false}}

Expand All @@ -52,20 +52,20 @@ All pickers support the past and future validation.
The `disablePast` prop prevents the selection all values before today for date pickers and the selection of all values before the current time for time pickers.
For date time pickers, it will combine both.

- On the `day` viewall the days before today won't be selectable.
- On the `month` and `year` viewsall the values ending before today won't be selectable.
- On the `hours` and `minutes` viewsall the values ending before the current time won't be selectable.
- On the `seconds` viewall the values before the current second won't be selectable.
- On the `day` view, all the days before today won't be selectable.
- On the `month` and `year` views, all the values ending before today won't be selectable.
- On the `hours` and `minutes` views, all the values ending before the current time won't be selectable.
- On the `seconds` view, all the values before the current second won't be selectable.

{{"demo": "DateValidationDisablePast.js", "defaultCodeOpen": false}}

The `disableFuture` prop prevents the selection all values after today for date pickers and the selection of all values after the current time for time pickers.
For date time pickers, it will combine both.

- On the `day` viewall the days after today won't be selectable.
- On the `month` and `year` viewsall the values beginning after today won't be selectable.
- On the `hours` and `minutes` viewsall the values beginning after the current time won't be selectable.
- On the `seconds` viewall the values after the current second won't be selectable.
- On the `day` view, all the days after today won't be selectable.
- On the `month` and `year` views, all the values beginning after today won't be selectable.
- On the `hours` and `minutes` views, all the values beginning after the current time won't be selectable.
- On the `seconds` view, all the values after the current second won't be selectable.

{{"demo": "DateValidationDisableFuture.js", "defaultCodeOpen": false}}

Expand All @@ -82,8 +82,8 @@ All the props described below are available on all the components supporting dat

The `minDate` prop prevents the selection of all values before `props.minDate`.

- On the `day` viewall the days before the `minDate` won't be selectable.
- On the `month` and `year` viewsall the values ending before the `minDate` won't be selectable.
- On the `day` view, all the days before the `minDate` won't be selectable.
- On the `month` and `year` views, all the values ending before the `minDate` won't be selectable.

{{"demo": "DateValidationMinDate.js", "defaultCodeOpen": false}}

Expand All @@ -93,8 +93,8 @@ The default value of `minDate` is `1900-01-01`.

The `maxDate` prop prevents the selection of all values after `props.maxDate`.

- On the `day` viewall the days after the `maxDate` won't be selectable.
- On the `month` and `year` viewsall the values starting after the `maxDate` won't be selectable.
- On the `day` view, all the days after the `maxDate` won't be selectable.
- On the `month` and `year` views, all the values starting after the `maxDate` won't be selectable.

{{"demo": "DateValidationMaxDate.js", "defaultCodeOpen": false}}

Expand All @@ -106,13 +106,13 @@ The default value of `maxDate` is `2099-12-31`.

The `shouldDisableDate` prop prevents the selection of all dates for which it returns `true`.

In the example belowthe weekends are not selectable:
In the example below, the weekends are not selectable:

{{"demo": "DateValidationShouldDisableDate.js", "defaultCodeOpen": false}}

:::warning
`shouldDisableDate` only prevents the selection of disabled dates on the `day` view.
For performance reasonswhen rendering the `month` viewwe are not calling the callback for every day of each month to see which one should be disabled (same for the `year` view).
For performance reasons, when rendering the `month` view, we are not calling the callback for every day of each month to see which one should be disabled (same for the `year` view).

If you know that all days of some months are disabled, you can provide the [`shouldDisableMonth`](#disable-specific-months) prop to disable them in the `month` view.
Same with the [`shouldDisableYear`](#disable-specific-years) prop for the `year` view.
Expand All @@ -124,9 +124,9 @@ Please note that `shouldDisableDate` will execute on every date rendered in the

#### Disable specific dates in range components [<span class="pro-premium"></span>](/x/introduction/licensing/#pro-plan)

For components supporting date range edition (`DateRangePicker`, `DateTimeRangePicker`)the `shouldDisableDate` prop receives a second argument to differentiate the start and the end date.
For components supporting date range edition (`DateRangePicker`, `DateTimeRangePicker`), the `shouldDisableDate` prop receives a second argument to differentiate the start and the end date.

In the example belowthe start date cannot be in the weekend but the end date can.
In the example below, the start date cannot be in the weekend but the end date can.

{{"demo": "DateRangeValidationShouldDisableDate.js", "defaultCodeOpen": false}}

Expand Down Expand Up @@ -192,7 +192,7 @@ shouldDisableTime={(value, view) =>
}
```

In the example belowthe last quarter of each hour is not selectable.
In the example below, the last quarter of each hour is not selectable.

{{"demo": "TimeValidationShouldDisableTime.js", "defaultCodeOpen": false}}

Expand Down Expand Up @@ -234,7 +234,7 @@ For now, you cannot use `maxDateTime` and `maxTime` together.

## Show the error

To render the current erroryou can subscribe to the `onError` callback which is called every time the error changes.
To render the current error, you can subscribe to the `onError` callback which is called every time the error changes.
You can then use the `helperText` prop of the `TextField` to pass your error message to your input as shown below.

Try to type a date that is inside the first quarter of 2022—the error will go away.
Expand Down
Loading