Enable DatePicker in javascript

[Thomas]

If I enable/disable my datepicker in javascript like so:

function ToggleEnabled( isEnabled )
{
   var myDateEdit = $find("<%=this.MyDatePicker.ClientID %>");
   myDateEdit.set_enabled( isEnabled );
}

That works fine if only fired client side. However, if I disable it server-side, this code works but does not enable the calendar button when it enables the control. The DateInput is enabled but not the calendar button. I have tried something like:

myDateEdit.get_Calendar().set_enabled( isEnabled );
Which does nothing. I have also tried:

myDateEdit.get_PopupButton().set_enabled ( isEnabled );
Which throws an error.

How can I ensure that enable/disable works against the entire control?

[Maria Ilieva]

Hello Thomas,

Indeed this is a known problem and basically once you start off with a datepicker disabled on the server, you cannot properly enable it on the client. We suggest you to either disable it on initial load via javascript, instead on the server, or use the server-side Enable/Disable along with our Ajax controls, so the user experience would still be smooth.
I hope this is a suitable approach.

Sincerely yours,
Maria Ilieva
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Chris O]

has this been updated yet?  I am still seeing this as a problem

[Pavel]

Hi Chris,

Have you tried the approach suggested by my colleague? Please do so if you have not and let us know if you need assistance.

Sincerely yours,
Pavel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Thomas]

AFAIK, it has not been fixed. I solved my problem by simply giving up on disabling the control dynamically on the client. Instead, the control is enabled or disabled entirely server-side.

[Pavel]

Hi guys,

I have prepared a small sample illustrating the suggested approach. Let me know if I can assist further.

Best wishes,
Pavel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Marlou]

Hi!

Is there any news about this bug, because this post is over 3 years old. If I disable the raddatepicker client side and a postback happens, the raddatepicker is enabled again. How can I prevent this? I can't enable/disable the control on the server side because of my client scripts.

[Maria Ilieva]

Hello Marlou,

I tried to replicate this issue with the latest official release of RadControls on my end but to no avail. Could you please which version are you using?

Regards,
Maria Ilieva
the Telerik team

[Marlou]

Hi Maria,

I also tried this with the latest release and I still have this problem. In Javascript I disable my datepicker like this:

dobPicker.set_enabled(false);

If I click a button and a postback occurs, the datepicker is enabled afterwards.

I also noticed that with the latest version my textbox is cleared if i disable it. I first set the value and then I disable it But then the textbox is cleared. Is there way to prevent this? I also tried set_enabled(false). With this function my value is there, but my textboxes don't look disabled until I hover over it with my mouse.

studentNumberText.set_value(student.code);
studentNumberText.disable();

[Princy]

Hi Marlou,

Try adding css class using javascript to get the disabled effect. And you can keep the datepicker disabled after a postback by using a hiddenfield as follows.

ASPX:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server"></telerik:RadDatePicker>
<telerik:RadButton OnClientClicked="OnClientClicked" ID="RadButton1" runat="server"></telerik:RadButton>
<asp:HiddenField ID="HiddenField1" runat="server" Value="0" />
<telerik:RadTextBox ID="RadTextBox1" runat="server" ></telerik:RadTextBox>

Javascript:

<script type="text/javascript">
  function OnClientClicked(sender, args)
  {
   var datepicker = $find("<%=RadDatePicker1.ClientID %>");
   datepicker.set_enabled(false);
   var hidden = document.getElementById("HiddenField1");
   hidden.value = 1;
   var textbox = $find("<%=RadTextBox1.ClientID %>");
   textbox.set_enabled(false);
   textbox.addCssClass("riDisabled");
  }
</script>

C#:

protected void Page_Load(object sender, EventArgs e)
{
 if ((IsPostBack) && (HiddenField1.Value=="1"))
 {
  RadDatePicker1.Enabled = false;
 }
}

Hope this helps.

Thanks,
Princy.

[Marlou]

Hi Princy,

What is the reason that the disable() function has changed? Because it works perfect in my old telerik version.

[Vasil]

Hi Marlou,

According to the html standards, "Disabled controls cannot be successful." this means that if you disable it the value should not be submitted to the server. So after the PostBack the control will be empty.

You can use the Princy's solution to achieve your scenario.

All the best,
Vasil
the Telerik team