Generic Method to Set Max Date on RadDatePicker

[Stacey Haslag]

I have a page with multiple RadDatePicker controls. For each control, I want the MaxDate to be the current date. So I created a Javascript method to set this. This is working fine. However, I don't wnat to have to create a unique Javascript method for each individual RadDatePicker to call.

Does anyone know a work-around for this situation? (I definately don't know my way around Javascript).  Is there a way I can pass as a parameter the ID of the particular RadDatePicker control, and use the parameter variable to find that control on the page?

Function to set the max date of my RadDatePicker:

function RadDatePicker_SetMaxDateToCurrentDate() {
        var datePicker = $find("<%= txtTest.ClientID %>");
        datePicker.set_maxDate(new Date());
     };

 

One of many RadDatePicker controls on my page:  

<telerik:RadDatePicker ID="txtTest" runat="server" MinDate="1900-01-01" >
    <DateInput ID="DateInput2" DateFormat="MMMM yyyy" runat="server" ReadOnly="true">
   </DateInput>
    <Calendar ID="CalendarInput2" runat="server">
        <SpecialDays>
            <telerik:RadCalendarDay repeatable="Today" Date="" ItemStyle-CssClass="rcToday" />
        </SpecialDays>
        <ClientEvents OnLoad="RadDatePicker_SetMaxDateToCurrentDate" />
    </Calendar>
</telerik:RadDatePicker>

 

 

 

[Johny]

Hi Stacey,

You can try the following code:

<script type="text/javascript">
        function RadDatePicker_SetMaxDateToCurrentDate(sender, args)
        {
            var id = sender.get_id().substr(0, sender.get_id().indexOf("_"))
            var picker = $find(id);
            picker.set_maxDate(new Date());
        }

    </script>

    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" MinDate="1900-01-01">
        <DateInput ID="DateInput1" DateFormat="MMMM yyyy" runat="server" ReadOnly="true">
        </DateInput>
        <Calendar ID="CalendarInput1" runat="server">
            <SpecialDays>
                <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday" />
            </SpecialDays>
            <ClientEvents OnLoad="RadDatePicker_SetMaxDateToCurrentDate" />
        </Calendar>
    </telerik:RadDatePicker>
    <telerik:RadDatePicker ID="RadDatePicker2" runat="server" MinDate="1900-01-01">
        <DateInput ID="DateInput2" DateFormat="MMMM yyyy" runat="server" ReadOnly="true">
        </DateInput>
        <Calendar ID="Calendar2" runat="server">
            <SpecialDays>
                <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday" />
            </SpecialDays>
            <ClientEvents OnLoad="RadDatePicker_SetMaxDateToCurrentDate" />
        </Calendar>
    </telerik:RadDatePicker>

I hope this helps,
Johny

[Stacey Haslag]

Thanks for the suggestion Johny,
 
I tried this:

var id = sender.get_id().substr(0, sender.get_id().indexOf("_"))
        var picker = $find(id);
        alert("id=" + id + "        picker=" + picker);

 Which returned this:
id=ctl00         picker=null

So it didn't work.

then I tried this:

        var id2 = sender.get_id();
        var picker2 = $find(id2);
        alert("id2=" + id2 + "        picker2=" + picker2);
        picker2.set_maxDate(new Date());

Which returned this:
id2=ctl00_cphBody_rptDetails_ctl01_txtDateOfCondition_calendar      picker2=[object Ojbect]

So I thought it would work, but when it executes the picker2.set_maxDate(new Date()) line, I get a "Error: Object doesn't support this property or method" error message.

[Johny]

Hi Stacey,

The code from my previous post will not work in master / content page scenarios. In this case you can try:

<script type="text/javascript">
        var date = new Date();
        function RadDatePicker_SetMaxDateToCurrentDate(sender, args)
        {
            var arr = new Array(date.getFullYear(), date.getMonth() + 1, date.getDate());
            sender.set_rangeMaxDate(arr);
        }
    </script>

    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" MinDate="1900-01-01">
        <DateInput ID="DateInput1" DateFormat="MMMM yyyy" runat="server" ReadOnly="true">
        </DateInput>
        <Calendar ID="CalendarInput1" runat="server">
            <SpecialDays>
                <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday" />
            </SpecialDays>
            <ClientEvents OnLoad="RadDatePicker_SetMaxDateToCurrentDate" />
        </Calendar>
    </telerik:RadDatePicker>
    <telerik:RadDatePicker ID="RadDatePicker2" runat="server" MinDate="1900-01-01">
        <DateInput ID="DateInput2" DateFormat="MMMM yyyy" runat="server" ReadOnly="true">
        </DateInput>
        <Calendar ID="Calendar2" runat="server">
            <SpecialDays>
                <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday" />
            </SpecialDays>
            <ClientEvents OnLoad="RadDatePicker_SetMaxDateToCurrentDate" />
        </Calendar>
    </telerik:RadDatePicker>

I hope this helps.
Johny