Default highlighted range

3 posts, 0 answers
  1. Peter
    Peter avatar
    27 posts
    Member since:
    Jul 2019

    Posted 02 Aug 2019 Link to this post

    Current Month August:

                    @(Html.Kendo().DateRangePicker()

                                                          .Name("daterangepicker3")
                                                          .Format("MM/dd/yyyy")
                                                          .Range(r => r.Start(DateTime.Now.AddMonths(-1)).End(DateTime.Now.AddMonths(-1).AddDays(10)))
                                                          .HtmlAttributes(new { style = "width: 100%", title = "daterangepicker3" })
                    )

    When the default Range is last month, clicking the date boxes, shows August, not July where the highlighted range is.   Is there away to set the start month?

  2. Denitsa
    Admin
    Denitsa avatar
    12 posts

    Posted 06 Aug 2019 Link to this post

    Hello Peter,
    You could set the start month in the calendar by using the navigate method of the calendar.

    In your example that could be done by adding the following:

    @(Html.Kendo().DateRangePicker()
    ....
    <script>
        $(function () {
            var today = new Date();
            var shownStartDate = new Date(today.getFullYear(),(today.getMonth() - 1),today.getDate())
            var picker = $('#daterangepicker3').data('kendoDateRangePicker')
     
            picker.dateView._calendar()
            picker.dateView.calendar.navigate(shownStartDate)
        })
    </script>


    Regards,
    Denitsa
    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.
  3. Peter
    Peter avatar
    27 posts
    Member since:
    Jul 2019

    Posted 06 Aug 2019 in reply to Denitsa Link to this post

    Thanks, that got me to closer to this:

        var picker = $('#daterangepicker3').data('kendoDateRangePicker');
        picker.dateView._calendar();
        picker.dateView.calendar.navigate(picker.range().start);

Back to Top