Setting value of RadDatePicker with Javascript

[Colin]

Hi

Can anyone please tell me how to set the value of the RadDatePicker using Javascript?

Thanks

Colin

[Shinu]

Hi Colin,

Use the set_selectedDate() method of raddatepicke in order to set the value from client side.

ASPX:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
</telerik:RadDatePicker>
<input id="Button1" type="button" value="Set Date" onclick="SetDate();" />

JavaScript:

<script type="text/javascript">
function SetDate()
{
    dateVar = new Date();
    var datepicker = $find("<%= RadDatePicker1.ClientID %>");
    datepicker.set_selectedDate(dateVar);
}
</script>

Checkout the following link to know more about clientside methods of raddatepicker.
Client-Side Basics
RadDatePicker Client Object

Thanks,
Shinu.

[Colin]

Hi Shinu

That's great.

Thanks very much for your help

Colin

[Joel R]

In order for the above to work the control must be enabled.  In my scenario I used the RadDateTimePicker and wanted the control to be enabled='false' but then the javascript did not set the value. telerik version 2011.1.519.35

telerik:RadDateTimePicker ID="RadDateTimePickerStop" Enabled="true" runat="server"

 

 

 

[Mark]

Can you explain why this works with $find, but not with document.getElementById?

[Marin Bratanov]

Hi Mark,

This is the way MS AJAX works. The client-side objects of IScriptControls (such as ours) are referenced by the $find() method: https://msdn.microsoft.com/library/bb397441(v=vs.100).aspx because it returns the component object with all its special API.

document.getElementById() returns a DOM object, which is not the same.

the control property of that DOM object is what $find() returns, so you can use something like as base for comparison:

<telerik:RadDateTimePicker runat="server" ID="RadDateTimePicker1"></telerik:RadDateTimePicker>
<script>
    function alertReference() {
        var domObj = document.getElementById("<%=RadDateTimePicker1.ClientID%>");
        var component = domObj.control;
        var dtp = $find("<%=RadDateTimePicker1.ClientID%>");
        console.log(component === dtp);
        console.log(component);
        Sys.Application.remove_load(alertReference);
    }
    Sys.Application.add_load(alertReference);
</script>

Regards,

Marin Bratanov
Telerik