Cannot disable raddatepicker

[Bill]

I am trying to enable/disable a raddatepicker control and am unable to do so. I followed the online documentation for the client-side api and when it runs, I get the msg "radAdmitDate" is undefined.

Below is my documented code. What am I doing incorrectly?

html
-------

                                                                                                               <td class="td_AEV">
                                                                                                                                    <asp:CheckBox ID="isAdmitted" runat="server" Text="Patient Admitted" Font-Size="8pt"
                                                                                                                                        onclick="EnableAdmitDate();" />
                                                                                                                                </td>

 

                                                                                                               <td class="td_AEV">
                                                                                                                                    Admit Date:<telerik:RadDatePicker ID="radAdmitDate" runat="server" Font-Size="8pt"
                                                                                                                                        Enabled="false" onblur="CheckForCompletedReqFlds('Chart');">
                                                                                                                                        <Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x"
                                                                                                                                            runat="server">
                                                                                                                                        </Calendar>
                                                                                                                                        <DatePopupButton HoverImageUrl="" ImageUrl="" />
                                                                                                                                        <DateInput ID="DateInput2" DateFormat="M/d/yyyy" DisplayDateFormat="M/d/yyyy" runat="server">
                                                                                                                                        </DateInput>
                                                                                                                                    </telerik:RadDatePicker>
                                                                                                                                </td>

 

js
----------

function EnableAdmitDate() {               
                if (document.getElementById("isAdmitted").checked == "1") {
                    var datepicker = <%= radAdmitDate.ClientID %>;
                    datepicker.DateInput.Enable();
                    datepicker.PopupButton.onclick = function()
                                            {
                                                datepicker.TogglePopup();
                                                 return false;
                                            };
                }
                else {
                    var datepicker = <%= radAdmitDate.ClientID %>;
                    datepicker.DateInput.Disable();
                    datepicker.PopupButton.onclick = null;
                }
            }

 

js runtime
---------------

function EnableAdmitDate() {               
                if (document.getElementById("isAdmitted").checked == "1") {
                    var datepicker = radAdmitDate;
                    datepicker.DateInput.Enable();
                    datepicker.PopupButton.onclick = function()
                                            {
                                                datepicker.TogglePopup();
                                                 return false;
                                            };
                }
                else {
                    var datepicker = radAdmitDate;
                    datepicker.DateInput.Disable();
                    datepicker.PopupButton.onclick = null;
                }
            }

[Daniel]

Hello William,

Please try to modify your code this way:

function EnableAdmitDate()
{
    if ($get("isAdmitted").checked == "1")
    {
        var datepicker = $find('<%= radAdmitDate.ClientID %>');
        datepicker.get_dateInput().enable();
        datepicker.get_popupButton().onclick = function ()
        {
            datepicker.togglePopup();
            return false;
        };
    }
    else
    {
        var datepicker = $find('<%= radAdmitDate.ClientID %>');
        datepicker.get_dateInput().disable();
        datepicker.get_popupButton().onclick = null;
    }
}

I hope this helps. Let me know if you have any questions.


Regards,
Daniel
the Telerik team

[Bill]

Daniel, I implemented your code. It works as far as enabling/disabling the AdmitDate, but it doesn't enable/disable the calendar popup (see attached pics).

When disabling the AdmitDate, it also doesn't clear out the contents of the AdmitDate textbox.

When the AdmitDate is enabled, you can type in the textbox, but looks disabled because the calendar popup is disabled.

Could you please inform me of the updated code I can use to correct this?

html
--------
<tr>
                                                                                                                                <td class="td_AEV">
                                                                                                                                    <asp:CheckBox ID="isAdmitted" runat="server" Text="Patient Admitted" Font-Size="8pt" onclick="EnableDisableAdmitDate();" />
                                                                                                                                </td>
                                                                                                                            </tr>
                                                                                                                            <tr>
                                                                                                                                <td class="td_AEV">
                                                                                                                                    Admit Date:<telerik:RadDatePicker ID="radAdmitDate" runat="server" Font-Size="8pt"
                                                                                                                                        Enabled="false" onblur="CheckForCompletedReqFlds('Chart');">
                                                                                                                                        <Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x"
                                                                                                                                            runat="server">
                                                                                                                                        </Calendar>
                                                                                                                                        <DatePopupButton HoverImageUrl="" ImageUrl=""  />
                                                                                                                                        <DateInput ID="DateInput2" DateFormat="M/d/yyyy" DisplayDateFormat="M/d/yyyy"  runat="server">
                                                                                                                                        </DateInput>
                                                                                                                                    </telerik:RadDatePicker>
                                                                                                                                </td>
                                                                                                                            </tr>


js
------

            // Enable/Disable AdmiteDate when Patient Admitted is checked/unchecked
            function EnableDisableAdmitDate() {
                if ($get("isAdmitted").checked == "1") {
                    var datepicker = $find('<%= radAdmitDate.ClientID %>');
                    datepicker.get_dateInput().enable();
                    datepicker.get_popupButton().onclick = function() {
                        datepicker.togglePopup();
                        return false;
                    };
                }
                else {
                    var datepicker = $find('<%= radAdmitDate.ClientID %>');
                    datepicker.value = null;
                    datepicker.get_dateInput().disable();
                    datepicker.get_popupButton().onclick = null;
                }
            }

[Bill]

Any update to this post?

It's been a couple of days now since I've heard from anyone....

[Daniel]

Hello William,

I recommend that you disable the whole picker control except if you need to disable the date input separately:

<script type="text/javascript">
    function EnableDisableAdmitDate()
    {
        var datepicker = $find('<%= radAdmitDate.ClientID %>');
        datepicker.set_enabled($get("isAdmitted").checked == "1");
    }
</script>

Also you can clear the contents of the control using the built-in clear method:

...
datepicker.clear();

RadDatePicker Client Object

Regards,
Daniel
the Telerik team

[Bill]

Thanks, that worked fine...