Bug report

When clearing the contents of part of a Kendo UI DateRangePicker with a clear button, the change event does not trigger.

Reproduction of the problem

1. Go to this Progress Kendo UI Dojo.
2. Add dates to start and end inputs - Change event fires as shown in console.
3. Clear them with the clearbutton - Change event does not fire.

Expected/desired behavior

The Change event should fire when clear button is pressed.

Workaround

Subscribing to a mousedown event on the clear button, and manually triggering the change event. It will require a setTimeout due to timing purposes:

      //Mousedown event on clear button
      $("span.k-clear-value").on("mousedown", function(e){

        //set timeout for timing purposes
        setTimeout(function(){

          //reference DateRangerPicker and trigger Change event
          var dateRange = $("#daterangepicker").data("kendoDateRangePicker");
          dateRange.trigger("change");
        }, 200);
      });

Environment

• Kendo UI version: 2024.3.806
• jQuery version: All Supported Versions
• Browser: all

Hi,

There might be an issue with the DateRangePicker - when dates are removed manually from inputs (e.g., select, then delete) and something like month/day/year is displayed, incorrect dates are returned when I use API.

var range = daterangepicker.range()

The issue can be reproduced in the DateRangePicker demo page. Steps to reproduce:

1. Open the page the jQuery DateRangePicker API page.
2. Click SET VALUE to assign some predefined values. Correct values are displayed in the widget.
3. Click GET VALUE and correct values are displayed in the popup (alert).
4. Clear inputs manually in the widget (clear the Start date first, then End date), so both inputs display month/day/year now.
5. Click GET VALUE again. Now, values are incorrect. Start is null and End displays the previously selected date, not null as expected.
   (If you clear End date first, then End Date would be null, and Start Date would be the previous value.)
   See the attached screenshot.

Is it a bug or I do something wrong? I am using 2024.1.3016. Is it fixed in the latest version? If not - any timeframe when it could be fixed? 

As of now I am using workaround - if an input value contains a letter, the then I assume date = null. Otherwise, I keep the value from range object. Is there a better way to work around the issue?

Thank you.

Regards, 

Aleksey Gasnikov

Reproducable in the following Dojo:

https://dojo.telerik.com/@foxontherock/UKureVOy/2 

Open the daterangepicker and make a selection, for example 10th of December to 15th of December(10.12 - 15.12). 

Open the daterangepicker and make another selection 12th of December to 17th of December(12.12 - 17.12).

Only the 17th is selected instead of the entire 12-17 range.

### Bug report

### Reproduction of the problem
_(bug report only)_
When start and depth are configured on a DateRangePicker, users are unable to select а range.

Dojo: https://dojo.telerik.com/oWUPosiP

### Expected/desired behavior
The expected is users to be able to select range as it is currently in DatePicker.

Dojo: https://dojo.telerik.com/oKIyeLEJ

Bug report

When the autoClose option is set to false the range set in the DatePicker is longer so that the end date of the selected range is not visible, and a new range can not be selected.

Reproduction of the problem

1. Open the Dojo and try to select a different range -https://dojo.telerik.com/@NeliK/otEjIcEh

Current behavior

The end date is never changed

Expected/desired behavior

It should be possible to select a new end of the range.

Environment

• Kendo UI version: 2024.2.514
• Browser: [all ]

Dear Kendo Support Team,

When we use DateRangePicker, we would like to show empty inputs, if the values aren't set. (They're filled with date format placeholder by default.)
Is there any solution to hide the placeholder text?

Regards,
Peter

When you spin up a DateRangePicker it looks like there are two independent date picker controls but unfortunately they act as a set.  the user selects the first (from) date picker and it forces them to select the to range as well.

It would be much better for users if the datepickers were independent of each other with built in range verification logic.

for some users the other way might make more sense but for alot it is confusing.

Hi,

I am experiencing problems with the k-ng-model binding on the DateRangePicker.

I made a Dojo example. Scenario and working / not working example included.

See: https://dojo.telerik.com/ehoteXOw/2

Something like this with at least these options and/or configurable options 

I guess these date range are used thoroughly by users in any application for filtering large set of records 

I'm observing this issue with the Demo version of the DateRangePicker: https://demos.telerik.com/kendo-ui/daterangepicker/index

1. Enter Start Date via keyboard (ex. 7/1/2017)
2. Click on End Date to select a date in the popup calendar (ex. 7/10/2019)

The End Date is not set and the Start Date changes to the selected End Date.

Hi,

I've implemented the DateRangePicker in our software and I noticed that the selection of the DateRangePicker has a slide different behavior to the Angular DateRangePicker.
This behavior is also reproducible in the demo website.

Scenario:
Select a range. Alter range to the new values. First, update '03-11-2019' -> '04-11-2019'. Second, update '09-11-2019' -> ''

First selection:
Start date: 03-11-2019
End date: 09-11-2019

Now I want to update this range to:

Expectation:
Start date: 04-11-2019
End date: 16-11-2019

Result:
Start date: 16-11-2019
End date: null
When I select the start date, it's updated as expected (04-11-2019) but selecting the new end date (16-11-2019), sets the a new start date instead of the end date. As described by the result values.

We would love to use the date range picker to do a month/year range, but from API documentation:
"In order to be able to select dates for the range you need to set the depth to month"

Why not allow depth to be year and the selection range based on months?

https://dojo.telerik.com/@joshua.hamman@one10marketing.com/urugoKOH

Thank you!

Dear Kendo Support Team,

we are using Kendo UI in our ASP.NET MVC application. We want to remove the values from DateRangePicker. The dates are removed from inputs but the calendar keeps the previous value highlighted when we move back and forth between the months.

Example code: https://dojo.telerik.com/ATuyAWuF/3

Best regards,
Peter

Dear Kendo Support Team,

We use kendo jQuery DateRangePicker component, and would like to achive the following:

• If we open the range picker by clicking the range begin value input, we would like to change the beginning of the range.
• If we open it by clicking the end value input, we would like to change the end of the range.

Actually the control always changes the date range start value no matter which input is used.
Is it possible to achive the above described behavior?

Regards,
Peter

When a range is pre-selected in the DateRangePicker the popup will open todays date view by default. 

Include an option that enables navigating to the selected range initially.

Bug report

The change event of the DateRangePicker fires three times every time you change an input field.

This is a regression in Kendo v2019.2.514

Reproduction of the problem

1. Open this Dojo example.
2. Select Start and End date.

Current behavior

The change event fires three times on every input change, for a total of six.

Expected/desired behavior

The change event should only fire once when a date is selected.

Environment

• Kendo UI version: 2019.2.514
• Browser: [all]

Assuming the DateRangePicker as a date range set already like this by the model

@(Html.Kendo().DateRangePicker()
                            .Name("daterangepicker")
                            .Min(DateTime.UtcNow.AddYears(-25))
                            .Max(DateTime.UtcNow.AddYears(25))
                            .HtmlAttributes(new { style = "width: 100%", title = "Event's Date" })
                            .Range(r => r.Start(Model.StartDate).End(Model.EndDate))
                            .Events(e => e.Change("onChange"))
                        )

@Html.HiddenFor(model => model.StartDate

@Html.HiddenFor(model => model.EndDate)

<script>

function onChange() {
        var range = this.range();
        if (range.start && range.end) {
            $("#StartDate").val(kendo.toString(range.start, 'd'));
            $("#EndDate").val(kendo.toString(range.end, 'd'));
            //$("#StartDate").val(range.start);
            //$("#EndDate").val(range.end);
            $("#StartDate").trigger("change");
            $("#EndDate").trigger("change");
        }
    }

</script>

When opening the dataview to change the selection (range) it should open at the set range instead of today's date which might be years apart. We shouldn't have to create a script which BTW is not opening the dataview_current on theproper date either.