diff --git a/docs/data/date-pickers/rfc/field.md b/docs/data/date-pickers/rfc/field.md index 5c54b870106cc..4691271ef1844 100644 --- a/docs/data/date-pickers/rfc/field.md +++ b/docs/data/date-pickers/rfc/field.md @@ -8,7 +8,7 @@ title: DX - Field
This page describes how people can use field with Material UI and how they can build custom fields while keeping the built-in editing behavior.
:::success -This page extends the initial proposal made in [this Github comment](https://github.com/mui/mui-x/issues/14496#issuecomment-2348917294) +This page extends the initial proposal made in [this GitHub comment](https://github.com/mui/mui-x/issues/14496#issuecomment-2348917294) ::: ## Basic standalone usage @@ -87,9 +87,12 @@ The field can then be rendered just like the Material UI fields: ### With Material UI :::success -No DX change here compared to today +No DX change here compared to today. +The only change is that the field component are detecting if there is a picker around them and adding an opening button if so (instead of having the picker pass a prop to define this opening button). ::: +The field exposed by `@mui/x-date-pickers` and `@mui/x-date-pickers` automatically + ```tsx import { DatePicker } from '@mui/x-date-pickers/DatePicker'; @@ -102,6 +105,15 @@ The concept of slots does not fit this use case very well, but the exploration o ### Without Material UI +To use the field inside a picker, it has to contain a way to open the picker. + +:::success +TODO: Find the DX to define a trigger button. + +- Should it a custom `Picker.Trigger` or directly the `Popover.Trigger` and `Dialog.Trigger`? +- If it uses the Base UI component, how should it handle the responsive version of the picker? + ::: + #### Inside a picker from `@mui/x-date-pickers` Even if most applications with a custom field probably want to remove `@mui/material` entirely, using these custom fields inside a self contained picker component from `@mui/x-date-pickers/DatePicker` is totally doable. @@ -187,7 +199,7 @@ When used inside a picker, `This page describes how people can use picker with Material UI and how they can build custom pickers.
@@ -11,18 +11,102 @@ title: DX - Pickers This page extends the initial proposal made in [#14718](https://github.com/mui/mui-x/issues/14718) ::: -## With Material UI +## Basic usage -### Basic usage +### With Material UI TODO -### Override part of the UI +### Without Material UI -TODO +```tsx +function CustomDatePicker(props) { + const manager = useDateManager(); -## Without Material UI + return ( +