Approved
Last Updated: 07 Jun 2019 08:00 by ADMIN
Nicolas
Created on: 31 May 2019 13:35
Category: DateRangePicker
Type: Feature Request
0
Opening dataview on the DateRange

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.

$(document).ready(function () {
        $("#daterangepicker").data("kendoDateRangePicker").dateView._current = new Date(@Model.StartDate.Year, @Model.StartDate.Month,@Model.StartDate.Day);
    });
1 comment
ADMIN
Viktor Tachev
Posted on: 07 Jun 2019 08:00
Hi Nicolas,

Thank you for the feature request. Based on the traction it gathers with the community we will consider implementing it in a future release. 

Until then, as a workaround, I can suggest handling the mousedown event for the DateRangePicker and navigating the DateView manually to the start of the selected range:

$("#daterangepicker").on("mousedown", function(e) {
    var picker = $("#daterangepicker").getKendoDateRangePicker();
    picker.dateView._current = picker.range().start;
    picker.open();
});


The approach is also illustrated in the dojo below:



Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.