[fields] How to set a placeholder for each of the ranges in a `SingleInputField`?

[svidskiy]

Latest version

• [X] I have tested the latest version

The problem in depth

I want to display 'End Date' instead of MMMM DD, YYYY. How can I do this? I couldn't find any information

          <LocalizationProvider dateAdapter={AdapterDayjs}>
              <DateRangePicker
                  slotProps={{
                      field: {
                          readOnly: true
                      }
                  }}
                  slots={{
                      field: SingleInputDateRangeField
                  }}
                  selectedSections={null}
                  disableDragEditing={true}
                  format='MMM DD, YYYY'
                  onChange={onChange}
                  value={value}
                  {...rest}
              />
          </LocalizationProvider>

Your environment

`npx @mui/envinfo`

``` System: OS: Windows 11 10.0.22621 Binaries: Node: 20.10.0 - C:\Program Files\nodejs\node.EXE npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD pnpm: 9.0.6 - C:\Program Files\nodejs\pnpm.CMD Browsers: Chrome: Not Found Edge: Chromium (127.0.2651.74) npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.5 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.17 @mui/icons-material: ^5.15.17 => 5.15.17 @mui/lab: ^5.0.0-alpha.170 => 5.0.0-alpha.170 @mui/material: ^5.15.17 => 5.15.17 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/system: 5.15.15 @mui/types: 7.2.14 @mui/utils: 5.15.14 @mui/x-charts: ^7.3.2 => 7.3.2 @mui/x-data-grid: 7.3.2 @mui/x-data-grid-generator: ^6.20.0 => 6.20.0 @mui/x-data-grid-premium: 6.20.0 @mui/x-data-grid-pro: ^7.3.2 => 7.3.2 @mui/x-date-pickers: ^7.4.0 => 7.4.0 @mui/x-date-pickers-pro: ^7.4.0 => 7.4.0 @mui/x-license: 7.2.0 @mui/x-license-pro: 6.10.2 @types/react: ^18.2.66 => 18.2.79 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.2.2 => 5.4.5 ```

Search keywords: date pickers

[flaviendelangle]

Hi, Right now this is not doable

On a field that display a single value, you could override the placeholder to force a specific value. But on a field that display two values in the same input, you can't override just one part.

By the way, how should it behave? You would render "End date" and then when the user focuses the field it switches to "MMMM DD, YYYY"? Otherwise the user would not be able to edit the value.

[svidskiy]

Hi, Right now this is not doable

On a field that display a single value, you could override the placeholder to force a specific value. But on a field that display two values in the same input, you can't override just one part.

By the way, how should it behave? You would render "End date" and then when the user focuses the field it switches to "MMMM DD, YYYY"? Otherwise the user would not be able to edit the value.

Hello, yes, I agree. But I have a task where the user should be able to change the date exclusively through a popup picker, and the input should only display the date. Therefore, I want to show a more readable version to the user. Still, I found a way, I overwrote the input value with my custom one. (You may also notice that I disabled selectedSections and turn on readOnly).

slotProps={{
  field: {
    readOnly: true
  },
  textField: {
    inputProps: {
      value: formatRange(start, end)
    }
  }
}}

const formatRange = (start: Dayjs | null, end: Dayjs | null) => {
  const format = (date: Dayjs | null, defaultText: string) => date?.format('MMM DD, YYYY') ?? defaultText;

  return `${format(start, 'Start Date')} - ${format(end, 'End Date')}`;
};

[michelengelen]

That's an interesting approach, indeed. 🤔 If it works for you, that's great. Can we close this issue or should we keep it open as a feature request @flaviendelangle ?

[svidskiy]

That's an interesting approach, indeed. 🤔 If it works for you, that's great. Can we close this issue or should we keep it open as a feature request @flaviendelangle ?

I think we can close this. It seems to me that this case is too rare to make it part of the functionality.

[flaviendelangle]

Agreed If the use case come back, we can see how to create a good re-usable recipe but for now I'm closing the issue :+1:

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@svidskiy: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.