DatePicker - Prevent future date selection

[Ashok]

I am using Telerik DatePicker. Is there a way I can display whole month, but prevent future date selection.
e.g.: Current Month is April 2011. Calendar displays Full April 2011, however if today is Apr 25, user can only select Apr 25. Can't go beyond this date.

I tried .Max(), but this will only display today's date max.

[Georgi Krustev]

Hello Tejas,

 
You can try to achieve your goal with the following code snippet:

function onChange(e){
   var endDate = new Date("10/10/2000");
   if(e.value > endDate){
       e.preventDefault();
   }
}

As you can notice you should wire OnChange event and in the event handler you should call preventDefault() if the selected date is bigger than the allowed one.

Best regards,
Georgi Krustev
the Telerik team

[Ashok]

Hi Georgi,

function ReferredTo_OnChange(e) {
    var endDate = new Date();
    if (e.value > endDate) {
        e.preventDefault();
    }
}

Based on your sample if I try to select future date, calendar (textbox) shows: 12-31/1969 as default date.

1) Is there a way to grayout future date? If Today is "04-27-2011" than user can't select any future date (as they are greyedout) on calendar.

2) I have two date picker From and To. Is there a way I prevent date selection as follows:
    if "From Date" is 04-20-2011 then "To Date" can't be less than "From Date"?

3) Is there a way we can prevent so that user can't type date in text box and has to use date picker?
    

[Ashok]

Any update on how to perform any of this?

[Georgi Krustev]

Hello Tejas,

Here is the correct way to stop selecting date bigger than "endDate":

function onChangeDatePicker(e) {
    var endDate = new Date();
    if (e.value > endDate) {
        if (e.previousValue === null) {
            $(this).data("tDatePicker").value(null);
        }
        e.preventDefault();
    }
}

And about the other questions:

#1: It will be hard to maintain "grayed" days through months navigation. Even you apply gray style to the days bigger than the "endDate" this style will be removed if the end user navigate to previous and then to the current month. One possible solution is to apply "t-other-month" class to the TD which contains date bigger than the "endDate". You can try to do this in the Load event handler. Just get calendar like so:

var calendar = $(this).data("tDatePicker").dateView.$calendar;

Then you just need to find required TDs and apply "t-other-month".

#2: On "From Date" change event just set min date of the "To Date". Use min() method to apply MinValue of the "To Date" datepicker.

#3: You can try to apply disabled="disabled" attribute to the HTML input element.

Regards,
Georgi Krustev
the Telerik team

[Ashok]

Thank you. This will surely help. We will take your advice make changes to the UI accrodingly.

[Ashok]

When I try to use 





You can try to apply disabled="disabled" attribute to the HTML input element.


I get javascript error in IE7.
Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus!

I have also attached screen shot. 
How do we resolve this?

[Georgi Krustev]

Hello Tejas,

In order to avoid the aforementioned behavior I will suggest you apply readonly attribute instead of disabled:

$("#DatePicker").attr("readonly", true)

Regards,
Georgi Krustev
the Telerik team

[Ashok]

Hi Georgi,

Do you think this will work:

.InputHtmlAttributes(new { readonly = true })


OR do I have to do this with javascript (what function should I use for javascript)? 

[Georgi Krustev]

Hello Tejas,

readonly is a modifier in C#. That is why you will need to use the suggested code like this:

.InputHtmlAttributes(new { @readonly = true })

Greetings,
Georgi Krustev
the Telerik team

[Ashok]

This helped. Thanks.