diff --git a/docs/data/date-pickers/adapters-locale/adapters-locale.md b/docs/data/date-pickers/adapters-locale/adapters-locale.md index 26b4113d0f7b..bf62a4b35c07 100644 --- a/docs/data/date-pickers/adapters-locale/adapters-locale.md +++ b/docs/data/date-pickers/adapters-locale/adapters-locale.md @@ -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 locales—follow 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. diff --git a/docs/data/date-pickers/custom-components/custom-components.md b/docs/data/date-pickers/custom-components/custom-components.md index 8eaf3a83d4fa..65034ecb8882 100644 --- a/docs/data/date-pickers/custom-components/custom-components.md +++ b/docs/data/date-pickers/custom-components/custom-components.md @@ -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 diff --git a/docs/data/date-pickers/getting-started/getting-started.md b/docs/data/date-pickers/getting-started/getting-started.md index d47244fe608f..4c04e87bd78c 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 @@ 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 functional—especially 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. diff --git a/docs/data/date-pickers/validation/validation.md b/docs/data/date-pickers/validation/validation.md index 2f9bb23631e6..f1cead013c47 100644 --- a/docs/data/date-pickers/validation/validation.md +++ b/docs/data/date-pickers/validation/validation.md @@ -19,7 +19,7 @@ But the same props are available on: - all the other variants of this picker; - For example—the validation props showcased with `DatePicker` are also available on: + For example, the validation props showcased with `DatePicker` are also available on: - `DesktopDatePicker` - `MobileDatePicker` @@ -27,21 +27,21 @@ But the same props are available on: - the field used by this picker; - For example—the 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 example—the 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 field—it enables its error state. +On the field, it enables its error state. {{"demo": "ValidationBehaviorInput.js", "defaultCodeOpen": false}} -On the calendar and clock views—the 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}} @@ -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` 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. +- 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` 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. +- 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}} @@ -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` 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. +- 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}} @@ -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` 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. +- 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}} @@ -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 below—the 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 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). +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. @@ -124,9 +124,9 @@ Please note that `shouldDisableDate` will execute on every date rendered in the #### Disable specific dates in range components [](/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 below—the 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}} @@ -192,7 +192,7 @@ shouldDisableTime={(value, view) => } ``` -In the example below—the 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}} @@ -234,7 +234,7 @@ For now, you cannot use `maxDateTime` and `maxTime` together. ## Show the error -To render the current error—you 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.