Material-ui-pickers: [DateRangePicker] Support a single input field

[Angelk90]

Is your feature request related to a problem? Please describe.
Having two input fields for selecting a range of dates, start and end, is very annoying.

Describe the solution you'd like
Have only one input field, which can have the start and end date as in the figure, in addition to the time if it is selected.

@dmtrKovalenko , @oliviertassinari :

[oliviertassinari]

is very annoying.

@Angelk90 Could you expand on what's very annoying?
For benchmark, I have only seen this approach used in https://ej2.syncfusion.com/react/demos/#/material/daterangepicker/default

[Angelk90]

@oliviertassinari : On which benchmark have you seen it?

For the kind of user experience I want to give for the ui I'm using, having only one input field would be better for me.

React:

http://projects.wojtekmaj.pl/react-daterange-picker

https://technikhil314.github.io/react-datetimerangepicker

https://github.com/v0ltoz/react-datetimepicker

https://github.com/aadilhasan/react-range-picker

Other:

https://ngx-daterange.netlify.com

https://www.daterangepicker.com

[oliviertassinari]

@dmtrKovalenko I would propose we close as "won't fix".

[dmtrKovalenko]

Yes, because it is not matched with material design guidelines and there is actually no real requirement to combine inputs.

[mesvil7]

It could be nice to have a prop for this. In my current project, I was using another option with a single input, but now that you finished the date range I have to switch and keep the styles.

[Angelk90]

@mesvil7 : Which one were you using?
Could you post a photo of the calendar you use?

[mesvil7]

@Angelk90

It's a combination of TextField and the Calendar.

You can probably replicate the same with material daterangepicker static mode.
something like this using React.

<Box position="relative">
  <TextField  value={calendarValue} onClick={toggleCalendar} ... /> 
     { isOpenCalendar && (
      <React.Fragment>
        <StaticDateRangePicker
          displayStaticWrapperAs="desktop"
          value={selectedDate}
          onChange={date => handleDateChange(date)}
        />
         <span className={classes.overlay} onClick={toggleCalendar}>
            &nbsp;
         </span>
      </React.Fragment>
     )}
</Box>

[oliviertassinari]

I have replaced the "won't fix" label with "waiting for upvotes". It might be a frequent use case, we will see.

crowdin.com

[dmtrKovalenko]

I do want to clarify why 2 inputs were required by material design guidelines:

1) Accessibility — with 1 input it is extremely hard to input date with only keyboard for blind people
2) Highlighting current selection (start or end) — by clicking on specific input we are moving current selection according to input.

We could probably mimic this behavior with styles (like react dates doing) — render styles for 1 input but render 2 html inputs inside.

[ravi-poonia]

if someone is looking for simple patch

<DateRangePicker
     renderInput={({ inputProps, ...startProps }, endProps) => {
          const startValue = inputProps.value;
          delete inputProps.value
          return (
            <TextField
              {...startProps}
              inputProps={inputProps}
              value={`${startValue}-${endProps.inputProps.value}`}
           />
)}/>