[DateRangePicker] No possibility to pass specific props to Start Text Input and End Text Input independently

[KarafiziArtur]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

<Controller
      name={name}
      control={form.control}
      render={({ field }) => (
        <DateRangePicker
          format="MM/dd/yyyy"
          localeText={{
             start: formatMessage({ id: `form.labels.${suffix}Start` }),
             end: formatMessage({ id: `form.labels.${suffix}End` }),
          }}
          {...field}
          renderInput={(startProps: TextFieldProps, endProps: TextFieldProps): ReactElement => {
            return (
              <Fragment>
                <TextField
                  sx={{ my: 1 }}
                  {...form.register(`${name}Start`)}
                  {...startProps}
                  helperText={localizedHelperTextStart}
                  error={!!errorStart}
                  inputProps={{
                    readOnly,
                    ...startProps.inputProps,
                    ...getTestIdProps("Start"),
                  }}
                  variant={variant}
                  fullWidth
                />
                <Box sx={{ mx: 1 }}> &raquo; </Box>
                <TextField
                  sx={{ my: 1 }}
                  {...form.register(`${name}End`)}
                  {...endProps}
                  helperText={localizedHelperTextEnd}
                  error={!!errorEnd}
                  inputProps={{
                    readOnly,
                    ...endProps.inputProps,
                    ...getTestIdProps("End"),
                  }}
                  name={`${name}End`}
                  variant={variant}
                  fullWidth
                />
              </Fragment>
            );
          }}
          {...rest}
        />
      )}
    />

Current behavior 😯

There is no possibility to set specific props to start text input and end text input in DateRangePicker

Expected behavior 🤔

We have specific props that we can pass to Start Text Input and End Text Input independently to each other

Context 🔦

We were migrating from v5 to v6 and got a problem registering our DateRangePicker's inputs in our form using React Hook Form: for Start Text Input we need to pass: {...form.register(${name}Start)} for End Text Input we need to pass: {...form.register(${name}End)}

Your environment 🌎

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ``` System: OS: macOS 13.1 Binaries: Node: 18.8.0 - ~/.nvm/versions/node/v18.8.0/bin/node Yarn: 1.22.19 - ~/.yarn/bin/yarn npm: 8.18.0 - ~/.nvm/versions/node/v18.8.0/bin/npm Browsers: Chrome: 110.0.5481.177 Edge: Not Found Firefox: 104.0.2 Safari: 16.2 npmPackages: @emotion/react: 11.10.6 => 11.10.6 @emotion/styled: 11.10.6 => 11.10.6 @mui/base: 5.0.0-alpha.118 @mui/core-downloads-tracker: 5.11.9 @mui/icons-material: 5.11.9 @mui/lab: 5.0.0-alpha.120 @mui/material: 5.11.10 @mui/private-theming: 5.11.9 @mui/styled-engine: 5.11.9 @mui/styles: 5.11.9 @mui/system: 5.11.9 @mui/types: 7.2.3 @mui/utils: 5.11.9 @mui/x-date-pickers: 6.0.0 @mui/x-date-pickers-pro: 6.0.0 @mui/x-license-pro: 6.0.0 @types/react: 18.0.28 react: 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 4.9.5 => 4.9.5

Order ID or Support key 💳 (optional)

No response

[alexfauquette]

You can do it thanks to calling back in slots

slotProps={{ 
    textField: ({ position }) => position==='start' ? propsForStart : propsForEnd
}}

https://codesandbox.io/s/ecstatic-tesla-4x8uhv?file=/demo.tsx:601-631

[KarafiziArtur]

You can do it thanks to calling back in slots

slotProps={{ 
  textField: ({ position }) => position==='start' ? propsForStart : propsForEnd
}}

https://codesandbox.io/s/ecstatic-tesla-4x8uhv?file=/demo.tsx:601-631

That's work, thanks

[genepaul]

It would be great if this were better documented. I just spent about an hour trying different things, and was just poking through issues before opening my own and finally found this.

[alexfauquette]

@genepaul Where did you go to find this information? To get an idea about where we could improve the docs

[genepaul]

@alexfauquette - I went to the DateRangePicker docs, then looked at DateRangeField, thinking maybe there was a customization example there. I think on the API page I found some mention of the slot props, but it didn't give much detail. I then started spelunking in the code, but struggled to navigate it to find the actual API of the types passed to the slot. That's when I gave up and was about to submit a new issue and decided as a last resort to search the issues.

[alexfauquette]

Thanks for your feedback

That's a bit strange because DateRangePicker docs page has a section for field customization that redirect to the page for customizing fields which includes a section customize start and end fields

Maybe it could redirect to a section specific to range fields. But other than that, not sure we can improve a lot. Or find a way t better highlight those sections that redirect to dedicated page

[genepaul]

@alexfauquette - it looks like that documentation was added 3 days after I posted my comment on this issue: https://github.com/mui/mui-x/pull/10227

So - awesome, my request was answered! :smile: That's some pretty quick turnaround.