DateInput v2

[kspeyanski]

Through the years we've had a solid core for the DateInput component, which is used internally across multiple KendoReact components (DatePicker, DateRangePicker, etc.). However, to enable future development and expand the features set of those components we've have to revisit the core DateInput component as we're hitting some technical limitations with the current implementation.

Controlled Mask/Placeholder

One of the most requested features is controlling the mast/placeholder shown inside the DateInput, this is not possible with the current underline logic of the component, thus we'll have to move this value in the state and allow control through props as well as onMask/onPlaceholder change event. This will further allow the implementation of a Floating label for all components using the DateInput underneath.

Controlled Date/Time parts

Due to the wild nature of the javascript Date object, we often try to guess what the user is trying to type, to autocorrect the value. One example for this is what happens when a user presses an arrow up/down on an empty selection. For the days we're using the currentDate as a starting value, thus increasing it with 1. This however is not the case for the month part, which always start from January and the year, which always starts from 2000 trying to account for the leap year.

This is not optimal, and while we should provide a deterministic default behavior, the developer should be able to control each of the date/time parts individually, even if the selection is not complete.

The biggest challenge here would be to keep the relation between the value and the parts.

Heavily inspired by this issue i believe the best way to introduce this is through controlled state for the different date/time parts where we have a single state object with all possible parts.

Something like this....

const [value, setValue] = React.useState();

const handleValueChange = (event) => {
    setValue(event.value);
}

const [parts, dispatchParts] = useParts(value, handleValueChange);
...
const handleRandomAction = () => {
 dispatchParts({type: 'reset', payload: 'minutes'});
}
...
<DateInput parts={{ 
    year: parts.year, 
    month: parts.month,
    date: parts.date,
    hour: parts.hour,
    minutes: parts.minutes,
    ...
  }} 
/>

We can try implementing the useParts hook for internal use and further expose it to developers to reuse it, with the ability to provide custom behavior per application requirements.

The best way to allow such API for class components would be through a HOC

Autocorrect

Currently, selection 30-th of February is not possible. While this is expected, there is no transparency nor a callback which informs the user how this auto-correct is happening. This further introduces a problem where we're autocorrecting the value before the full date have been entered, which does not allow the user to correct it himself.

A possible solution here would be to allow the developer to define how and when such autocorrect is happening, either through a function or through value/callback pair.

Auto-switching parts

We used to have auto-switching parts in a past version of the @progress/kendo-react-dateinputs package, which often was unwanted rather than helpful - This led to us disabling it, and change parts only when the user manually navigated to the next part either through keyboard or mouse action.

While the correct default behavior here should be to never auto-switch parts, i believe there is a place for a public API which can allow the control of the current selection through a value/callback pair.

Let's use this issue as an umbrella issue to track everything DateInput related. I'm closing the following issues in favour of this one: https://github.com/telerik/kendo-react/issues/135 https://github.com/telerik/kendo-react/issues/646 https://github.com/telerik/kendo-react/issues/604 https://github.com/telerik/kendo-react/issues/578

[simonssspirit]

reports from ticket 1505526.

We should aim to improve the following two cases:

1. make it easier to copy to full value.
2. make it easier to delete the full value.

[zubair1103]

Similarly make it easier to type date/time. In regular text input control, users are used to type date/time smoothly e.g. I am typing 02/11/2021 12:46. In kendo react date/time picker it is not easy to type. After type 02 it should auto jump to month section and 11 should be there. Maybe similar to masked input.

[simonssspirit]

also requested in 1506748

[kspeyanski]

@zubair1103

At some point the DateInput had the auto-switch enabled, but we decided to drop it due to unpredictable results when typing.

I'm open for discussion around this topic, but at this point we do not plan to have this feature supported. Please feel free to take a look at the following issue where we discuss this functionality: https://github.com/telerik/kendo-react/issues/135#issuecomment-443631842

[danielandersson213]

Something similiar to how Material UI handle date inputs would be great. https://mui.com/components/date-picker/

[Tommuh]

Automatically switching from day to month and month to year is much more user-friendly than having the user press the arrow key.

At the time, we stopped using the Kendo date fields and created our own so that we can still switch automatically. We only use the date picker, we render the input field as hidden. The masking we use from "react-imask".

Is there any way to enable this? We prefer to use the Kendo components.