IgxDateRangePicker UX improvement

[luiscla27]

Is your feature request related to a problem? Please describe.

I'm frustrated with UX of the Date Range Picker component, some issues with it are the following. They aren't much of an problem when seeing them as individual issues, they are frustrating when seeing as a whole:

1. Extra clicks when I mistakenly clicked the wrong start date, as I have to select "end" and then start again
2. Extra clicks when I want to modify only the end date, as I have to always select both dates, same goes for start date.
3. I'm never sure if the first click I do is going to modify the "start" or "end" value, for some reason I intuitively always expect the wrong date to be modified.

Describe the solution you'd like

Please take a look to this example component from Mui X built using fluent guidelines as a base. The issues I listed are addressed as follows:

1. There's a rule that the "end" must always be greater than the "start". So, that means that if I click a smaller one is considered as a "start". This rule might be related to language, as english and spanish are read from left to right. So, selection is being done in that same order.
2. There's separated fields for "start" and "end". So, the first modified date is the field I clicked
3. There's a "preview" of the dates being selected before the click is done.

Also, a desired effect would be able to "drag and drop" the already selected dates as It would improve even more the UX of the second issue I mentioned.

Describe alternatives you've considered

In some cases I prefer to add two normal separated date pickers and add validations myself.

Edit 1: I mistakenly thought fluent had already a definition for date-range components as I saw all fluent based date-range pickers always implemented the set rules I listed. Now I know they don't. Is a work in progress though.

Edit 2: Mui X revamped their date pickers recently, their UX has got even better, some new features I noticed:

1. Field version, which are dates meant to be typed (not selected)
2. Drag and drop to edit date range

I was surprised to see that the idea of drag & drop got implemented, the field versión seems to be a super enhanced version of a masked field. BTW, thank you for paying attention to this :)

Feedback provided by Infragisitcs UX Team Currently, we believe that implementing mouse or keyboard navigation, including tap functionality on mobile and tablets, in our single input Date Range Picker will be an enhancement that will provide users with the convenience of selecting and modifying their desired Start or End date with ease, ultimately reducing unnecessary clicks. Drag and drop functionality and hover indication giving feedback on what the user will select will be considered after revamping and resolving the basic user problems within the Single Date Range Picker.