Date Picker -Range - disabled dates later than maximum date

[Jenny]

Am using Kendo datepicker Range for dates showing from date and to date  in my application developing in AngularJs. 

  My requirement is once to date is selected , the from date has to show the dates after  selected to-date as disabled  . I am using k-max = "vm.maxDate" and dates after the to-date is not visible.  Similarly for to-date , the dates prior to from-date is not visible where as it should be disabled as per my requirement .

<input kendo-date-picker k-max = "vm.maxDate" k-rebind = "vm.maxDate" id="fromdate" />

<input kendo-date-picker k-min = "vm.minDate" k-rebind = "vm.minDate" id="todate" />

While loading the page , we are setting the default values as :

    vm.maxDate = new Date();
    vm.minDate = new Date(2000, 0, 1, 0, 0, 0);

Please help me on this 

 

[Kiril Nikolov]

Hi,

Please check the following sample and let me know if it helps:

http://dojo.telerik.com/ojucE

Regards,
Kiril Nikolov
Telerik

 

 

[Jenny]

Thanks . This works fine for the first time . Todate calendar after the first change in fromdate or not reseting if we clear the input text .

[Jenny]

Thanks . This works fine for the first time . Todate calendar is not getting refreshed from the next change on wards . And also not refreshing when we clears the input field

[Kiril Nikolov]

Hi,

I am not sure that I understand the problem, can you please change the example from my previous response, so it can show the issue you are facing?

Regards,
Kiril Nikolov
Telerik

 

 

[Jenny]

Steps to replicate in the previous example 

1. Select a date from FromDate calendar (say 5/18/2016)  

2. Open the ToDate calendar , we can see the dates after the selected FromDate  (19th onwards) seems to be disabled 

3. Repeat the same steps . ie Select another date in FromDate calendar( 5/23/2016) 

4. now open the Todate calendar, the disabled dates are still from 19th , whereas it should be changed to 24th onwards.

Hope the issue is clear now .

 

[Kiril Nikolov]

Hello,

If you want to change the configuration options runtime you need to use the k-rebind directive documented here:

http://docs.telerik.com/kendo-ui/AngularJS/introduction#widget-update-upon-option-changes

Regards,
Kiril Nikolov
Telerik

 

 

[Jenny]

We are using  k-rebind="toOptions"          k-options="toOptions"  as you see in the example.  Still not rebinding 

[Kiril Nikolov]

Hello,

Due to the stabilization algorithms in AngularJS the watch does not trigger change when the function is changed. As a workaround I would suggest you to use the widgets setOptions() method - it should give you better performance as well. Here is an example:

http://dojo.telerik.com/ojucE/4

Regards,
Kiril Nikolov
Telerik

 

 

[Jenny]

Thanks !!! That was a great help . 

Here I run through another problem  with calendar .  When i select a date  and clears out the input field, ie I select  5/24/2016 from calendar , the input field displays the same . Then I clears the input field . Now when I open the calendar , it shows the previously selected date (5/24/2016) in a highlighted outlined box . I don't want the calendar to remember/show my previous selections . What I need to do for this ? Please help 

 

[Kiril Nikolov]

Hello,

This question differs from the original topic of the conversation, so please open a separate thread and we will be happy to help!

Regards,
Kiril Nikolov
Telerik