Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Under Review
Last Updated: 22 Oct 2024 11:29 by Peter
Peter
Created on: 23 Aug 2024 12:14
Category: DatePicker
Type: Feature Request
0
Make entering date/times more "fluent"

Dear Sir/Madam,

We are piloting our application and repeatedly get the same feedback from our users: they find entering information in the date and time inputs annoying.

The reason for this is that they have to enter a date (say 1 december 2024) by entering:

  • Day (1)
  • Press /
  • Month (12)
  • Press /
  • Year (2023)

Instead, they would like to enter a date in one go, say

  • "01122023" should resolve to 1 december 2023.
  • "0112" should resolve to 1 december 2024, because year is missing and we can then assume that we use the current year.

 

Likewise, they would enter times like "1005" for "10:05". Now they have to enter ":" to go to the minutes field.

 

We would like to respond to their feedback, but don't know to implement this. Is this something that Kendo supports? If not, we are willing to pay to give this feature request priority. Could you help us out?

 

Regards,

Peter

10 comments
Peter
Posted on: 22 Oct 2024 11:28
Hello Svetoslav,

We have patched the "@progress/kendo-react-dateinputs":"8.1.1"
It now supports automatic switching to the next date segment.

By default the month is selected → month/day/year
Enter the month and you will see the selected day → 10/day/year
Enter the day and you will see the selected year → 10/10/year
When the "Year" is selected and you press the "Tab" key, the current year is automatically set. → 10/10/2024

Finally, the end user presses "1010" on the keyboard and automatically receives the date 10/10/2024


The git patch file is attached to the message. Apply this patch to @progress/kendo-react-common: "8.1.1" and you will see all the changes.
Maybe you can reuse the logic and apply it to future versions.

P.S. I haven't found a way to create a PR for the source code. Do you support PR's?

Regards,
Peter
Attached Files:
ADMIN
Filip
Posted on: 17 Oct 2024 07:02

Hi, Peter,

Yes, you are correct that there is the disadvantage of developing your own component with the provided approach. As for updating the source code, licensed users can use the repository for building modified versions of the official package. However, the KendoReact license prohibits the redistribution of modified versions of the packages:

In case further questions on this matter arise please do not hesitate to reach out to me again and I will gladly assist.

Regards,
Filip
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Peter
Posted on: 16 Oct 2024 07:49

Hello Svetoslav,

Do you have any suggestions/solutions to the last comment?

 

Regards,
Peter

Peter
Posted on: 10 Oct 2024 11:14
Hello Svetoslav,

The disadvantage of this approach is that we have to develop our own component with the same functionality as the Kendo component and add the necessary logic on top of it.

Another option is: we can update the source code of the Kendo component, compile it and use it in our project.

Doesn't this violate the Kendo licence and is it valid to do so?


Regards,
Peter
ADMIN
Filip
Posted on: 01 Oct 2024 08:32

Hi, Peter,

Thank you for the provided feedback. With the current implementation of the DatePicker a possible approach for entering date without the dash I can recommend taking advantage of the custom rendering option and using an input with type "date". I have modified the example sent previously to showcase this approach here:

This way entering `01122023` should resolve to 1 december 2023. While this approach might not be ideal for the time being I hope it can prove useful. Please review the implementation above and let me know in case this is not exactly what you are looking for and further assistance is required.

Regards,
Filip
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Peter
Posted on: 24 Sep 2024 10:30

Hello Svetoslav,

Thanks for your Proof of Concept, but unfortunately it doesn't really fulfill my requirement.

  • When I enter something like "12-05" this works great, and "12 May 2024" is chosen. That's great!

  • Would it also be possible to enter "1205" without dash ("-") and make the date picker select automatically "12 May 2024"?

  • I fully appreciate that you don't want the date picker to become time agnostic. That makes complete sense. Maybe the underlying problem is that currently the date/time pickers converts user input to a date/time without allowing us to intercept the raw inputs (like "1205") and doing the conversion ourselves. We only get an "onChange" event when new fully valid date is entered.

    Maybe we could add an event like "onRawChange" that allows us to get the raw inputs and do the calculation ourselves?

Regards,

Peter

 

Regards,

Peter

ADMIN
Svetoslav Dimitrov
Posted on: 27 Aug 2024 06:20

Hello, Peter,

I tested a bit with the current API of the DatePicker component and came up with a configuration of the format prop. Here is a StackBlitz example - https://stackblitz.com/edit/react-vuddjv-pto3uh?file=app%2Fapp.jsx, where you can only modify the day and month segments, and the year is always static. Does this fulfil your requirement? 

Regards,
Svetoslav Dimitrov
Progress Telerik

Do you have a stake in the designеr-developer collaboration process? If so, take our survey to share your perspective and become part of this global research. You’ll be among the first to know once the results are out.
-> Start The State of Designer-Developer Collaboration Survey 2024

ADMIN
Svetoslav Dimitrov
Posted on: 27 Aug 2024 04:35

Hello, Peter,

Our main concern is that the DateInput (the DatePicker is a composite component with DateInput as base), needs to become time-aware. It has to know all the fields in the new Date() constructor - the year, month, day, hour, minute, seconds, and milliseconds- to ensure that we can properly construct the new Date ourselves. That, however, faces us with another decision - what timezone to use. There is a use case where the component can display 31st of December 2024, however, in a different timezone it is now 2025. This can happen quite often in months and days. 

A core concept of the KendoReact components is that they are data-agnostic. They rely on the users for input, and do not make data decisions on their own. 

That said, can you send me an example of a date input component that omits the year successfully?

Regards,
Svetoslav Dimitrov
Progress Telerik

Do you have a stake in the designеr-developer collaboration process? If so, take our survey to share your perspective and become part of this global research. You’ll be among the first to know once the results are out.
-> Start The State of Designer-Developer Collaboration Survey 2024

Peter
Posted on: 26 Aug 2024 09:30

Hello Svetoslav,

Thanks for your reply.

Regarding writing only date and month segments and committing the year, I understand that it would introduce a breaking change. Could we therefore make it optional instead, so that users have to opt in?

Regards,

Peter

ADMIN
Svetoslav Dimitrov
Posted on: 26 Aug 2024 08:49

Hello Peter,

I agree that your request is a valid one, thus I have opened a new Feature Request on your behalf - Add an option to switch between date segments automatically. I have added your Vote for it and you are automatically subscribed to receive email notifications on status updates. 

On the topic of writing only date and month segments and committing the year. The components in the Kendo React suite are pieces of front-end building blocks. They are unaware of the current date (incl. year, date, month, and time). The constructor of the Date object (new Date) expects year, monthIndex, day, hour, minute, second, and millisecond as fields. The 0112 will mean 01 year and December, but it cannot translate to 2024, December the first.  To make that possible would mean that we must make the component aware of the current time, which will introduce issues with localization (in which timezone the current time must be), and make a massive breaking change for all existing customers. 

Regards,
Svetoslav Dimitrov
Progress Telerik

Do you have a stake in the designеr-developer collaboration process? If so, take our survey to share your perspective and become part of this global research. You’ll be among the first to know once the results are out.
-> Start The State of Designer-Developer Collaboration Survey 2024

Create an account Log In
View
Type
Status
Category