How to identify multiple date picker

[John]

Hi,

 I m having multiple datepicker on a page with customized footer, I want all of them to access a single javascript when an onclientclick() function is activated 

<telerik:RadDatePicker>

..

<FooterTemplate>

                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp

                            <asp:ImageButton ID="IBToday" runat="server" OnClientClick="SelectToday(); return false;" ImageUrl="~/Skins/Web20/Calendar/MonthYearTodayBtn.gif" />

</FooterTemplate>

</telerik:RadDatePicker>

function SelectToday()

{

    var currentDate = new Date()

    var picker = $find("<%= datepicker1.ClientID %>");

    

    picker.set_selectedDate(currentDate);   

    picker.hidePopup();     

}

Using $find can I identify the many date pickers on the page ? If yes ,How can i do it ? If No Please let me know the other way to do it .

Thanks

[Princy]

Hello John,

You could pass the RadDatePicker id to the OnclientClick() function to get the reference to the datepicker.

aspx:

<telerik:RadDatePicker ID="datepicker1" runat="server">
    <FooterTemplate>
             <asp:ImageButton ID="IBToday" runat="server" OnClientClick="SelectToday(datepicker1); return false;" ImageUrl="~/Images/today.gif" />
    </FooterTemplate>
</telerik:RadDatePicker>

<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
    <FooterTemplate>
             <asp:ImageButton ID="IBToday" runat="server" OnClientClick="SelectToday(RadDatePicker1); return false;" ImageUrl="~/Images/today.gif" />
    </FooterTemplate>
</telerik:RadDatePicker>

javascript:

<script type="text/javascript">
function SelectToday(sender)
{
    var currentDate = new Date();
    var picker = $find(sender.id);
    picker.set_selectedDate(currentDate);
    picker.hidePopup();
}
</script>

Thanks,
Princy.

[John]

Hi,

 I have another doubt ,If I m having this datepicker in an user control and there are many of the same user control how to identify?

Thank you

[Shinu]

Hi John,

You can have the Client function on the UserControl Page and pass the ClientID of the RadDatePicker to client function as shown below.

ASCX:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>



&nbsp;<telerik:RadDatePicker ID="RadDatePicker1" runat="server"  >
</telerik:RadDatePicker>

<script type="text/javascript">
 function SelectToday(id)
{
    alert(id);
    var currentDate = new Date();
   var picker = $find(id);
   alert(picker);
   picker.set_selectedDate(currentDate);
    picker.hidePopup();
}
</script>

ASCX.cs:

   RadDatePicker1.Attributes.Add("OnClick","SelectToday('"+RadDatePicker1.ClientID+"');");

Thanks
Shinu.

[John]

Hi,

 I have created the user control using the datepicker.The issue is, I have button in the footer template of the calendar in the datepicker 

Ascx :

<telerik:RadDatePicker ID="datepicker1" runat="server">

<FooterTemplate>

<asp:ImageButton ID="IBToday" runat="server" OnClientClick="SelectToday(this); return false;" ImageUrl="~/Images/today.gif" />

</FooterTemplate>

</telerik:RadDatePicker>

function SelectToday(sender)

{

alert(sender.id);

var currentDate = new Date()

var picker = $find(<%= datepicker1.ClientID %>);

alert(picker);

picker.set_selectedDate(currentDate);

picker.hidePopup();

} I am unable to set the date by clicking the button bexause it gives javsscripterror. Please let me know how to clear this issue. Thank you

function SelectToday(sender)

{

alert(sender.id);

var currentDate = new Date()

var picker = $find(<%= datepicker1.ClientID %>);

alert(picker);

picker.set_selectedDate(currentDate);         picker.hidePopup();

} When I place this user control in an aspx page and try to set the date I get java script error.please let me know how to clear this. Thank you

[John]

Hi,

 I have created the user control using the datepicker.The issue is, I have button in the footer template of the calendar in the datepicker .I cannot set the date when I click on the button because of javscript error after i add it to aspx page.let me know how to clear this issue.

ascx:

function SelectToday(sender)

{

    alert(sender.id);

    var currentDate = new Date()

    var picker = $find(<%= datepicker1.ClientID %>);

    alert(picker);   

    picker.set_selectedDate(currentDate);    

    picker.hidePopup();  

   

}

<telerik:RadDatePicker id=datepicker1>

<FooterTemplate>

                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp

                            <asp:ImageButton ID="IBToday" runat="server" OnClientClick="SelectToday(this); return false;" ImageUrl="~/Skins/Web20/Calendar/MonthYearTodayBtn.gif" />

</FooterTemplate>

</telerik:RadDatePicker>

Thank you

[Shinu]

Hi John,

Since there can be more than one usercontrol(containing the  Datepicker) in the same aspx page, the ClientID of the DatePicker in each UserControl will be different. Hence it is better to access the ClientId from the server side and pass it to client side function. Here I have modified the code to match with your scenario. I have attached the OnClick client function for the ImageButton from the server side and pass the ClientID of the RadDatePicker from the server side.

ASCX:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>



<telerik:RadDatePicker ID="datepicker1" runat="server"  >
   <Calendar runat="server">
     <FooterTemplate>
         <asp:ImageButton ID="IBToday"  runat="server" ImageUrl="~/Images/Image1.gif" />
     </FooterTemplate>
   </Calendar>
</telerik:RadDatePicker>

<script type="text/javascript">
 function SelectToday(id)
{
    alert(id);
    var currentDate = new Date();
   var picker = $find(id);
   alert(picker);
   picker.set_selectedDate(currentDate);
    picker.hidePopup();
}
</script>

ASCX.Cs:

   protected void Page_Load(object sender, EventArgs e)
    {
        ImageButton imgBtn = (ImageButton)datepicker1.Calendar.FindControl("IBToday");
        imgBtn.Attributes.Add("OnClick", "SelectToday('" + RadDatePicker1.ClientID + "');return false;");

    }

Regards
Shinu.

[John]

Hi  Shinu,

 Thank you

John