How do I control DateRangePicker using single button input?

Progress® KendoReact Feedback Portal

Create an account Log In

Request a Feature Report a Bug

Unplanned

Last Updated: 10 Feb 2022 05:47 by ADMIN

Gaurav

Created on: 08 Feb 2022 07:08

Category: KendoReact

Type: Feature Request

How do I control DateRangePicker using single button input?

Hello Team,

We have got this requirement to open date range picker using a single button input. Is there any way I can achieve this. I can see there is endDateInput and startDateInput available but it still renders 2 different inputs. But we want single button to control whole thing.

Thanks,

Gaurav

5 comments

ADMIN

Stefan

Posted on: 10 Feb 2022 05:47

Hello, Gaurav,

Thank you for the confirmation.

I have transferred this to an official public feature request.

We will monitor its popularity and plan it accordingly.

I also already added your vote for convenience.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Gaurav

Posted on: 10 Feb 2022 05:45

Hi Stefan,

If possible please convert this into public feature request.

Basically, we need DateTimeRangePicker wherein we should be able to select time range across calendar.

Couple of samples below how this could look.

Thanks,

Gaurav

ADMIN

Stefan

Posted on: 08 Feb 2022 14:31

Hello, Gaurav,

Currently, we only have a DateTimePicker and the DateRangePicker components.

I can recommend making a request for the new component as this is how we plan the next features/components:

https://feedback.telerik.com/kendo-react-ui

I can also directly convert this item into an official public feature request.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Gaurav

Posted on: 08 Feb 2022 12:54

Hi Stefan,

Thank you so much! That is exactly the thing I have been looking. I was able to create something quickly based on your suggestion.

There is one more question though. Currently there is only date range picker available within Kendo library. But, sooner we will have requirement to include time as well while selecting a range. Is there anything like DateTimeRangePicker available or planned? If not please guide on how can I create one.

Thanks,

Gaurav

ADMIN

Stefan

Posted on: 08 Feb 2022 07:28

Hello, Gaurav,

Currently, there are two inputs needed to display the two values.

If the values will not be displayed and only a button is needed, we can suggest the following:

1) Render a standard button on the page.

2) Add a popup component to the button:

https://www.telerik.com/kendo-react-ui/components/popup/

3) Inside the Popup render the MultiViewCalendart to select ranges:

https://www.telerik.com/kendo-react-ui/components/dateinputs/multiviewcalendar/

https://www.telerik.com/kendo-react-ui/components/dateinputs/api/MultiViewCalendarProps/#toc-mode

If the requirement is different, please share a visual example of it.

Regards,
Stefan
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.