DatePicker enable/disable clientside

[Brad]

I can't seem to get my datepicker control to properly enable/disable on the client side. I've included my javascript below.

When the function is called, it partially works. The textbox portion of the control is enabled/disabled appropriately. But the popup button seems to always work, regardless of wether the control is enabled/disabled.

What am I doing wrong? I've searched for other answers on this, but they are all really old (more than 2 years) and the api has changed significantly since then.

	function ToggleDatePicker(enable)
	{
	var DatePicker = $find('<%= StartDate.ClientID %>');
	if (!enable)
	{
	DatePicker.get_dateInput().disable();
	DatePicker.get_popupButton().onclick = null;
	}
	else
	{
	DatePicker.get_dateInput().enable();
	DatePicker.get_popupButton().onclick = function() { DatePicker.togglePopup(); return false; };
	}
	}

[Missing User]

Hello Brad,


Please find attached a sample web application that demonstrates the needed approach.

Best wishes,
Plamen
the Telerik team

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

[Brad]

Thanks. I also found out that there's an example for this in the documentation. It's just kind of hard to find. It's under RadCalendar>Clientside programming>Clientside basics, all the way at the bottom. That example works great.

[Rory]

We've been having issues with Disabling datepickers ServerSide on load and then trying to enable them later on the Client Side. It doesn't work. The Popup window stays greyed out. So we have to handle all datepicker enable / disable clientside on clientside pageLoad. For us we have a better way to cancel the window opening. It uses the sender rather than a var enabled.

function PopupOpening(sender, args)
{
    args.set_cancel(!sender.get_dateInput().get_enabled());
}

OR Just

function PopupOpening(sender, args)
{
    args.set_cancel(!sender.get_enabled());
}

[Rory]

I tried this approach but it breaks the SharedCalendar functionality for other DatePickers on the page. Anyone know a better way to Disable DatePickers ClientSide?

[Timothy Fischer]

I agree - I have a page with multiple datepickers and the example code above disables ALL of them when one is disabled.  Looking for help on this.  And since this is a pretty old post, I am wondering why Documentation and Help are nowhere close to what the API is now?

Can't get much to work with this code and half the functions are completely undocumented (I'm having to parse out the javascript to find basic methods).

Any help would be greatly appreciated!

Tim

[Dimo]

Hello Timothy,

RadDatePicker enabling and disabling works a lot better in the latest RadControls versions and you don't need any custom script - only

picker.set_enabled( bool argument );


Kind regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Timothy Fischer]

Could you please point me to where that documentation is?  I think I might be looking in the wrong place as I can't find that and am wondering what else I am missing.

Thanks!

Tim

[Dimo]

Hello Timothy,

set_enabled is used across various RadControls, but it seems that we have missed mentioning it in the RadDatePicker API. We will add it there as well to prevent confusion.

Regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Timothy Fischer]

Ok - so set_enabled doesn't work properly in my situation.  I have a repeater with a radDatePicker in it as well as a checkbox for enabling/disabling the datepicker.

        function ToggleDatePicker(el, radId) {
            var DatePicker = $find(radId);

            if ($telerik.$(el).is(':checked') == true) {
                DatePicker.set_enabled(false);
            }
            else {
                DatePicker.set_enabled(true);
            }
        }

where el is the checkbox element and radId is the id of the radDatePicker.  This function is kicked off when a user clicks the checkbox.

What happens is that he Datepicker enables and disables without issue *unless* while the datepicker is enabled, the user pops up the calendar.  If the user pops up the calendar, then disables and re-enables the datepicker, then javascript errors out with the attached picture of the Firebug probs.

(PASTED, same as jpeg)

f is null
a<f.rows.length;

Teleri...59462f1 (line 5857)

Tim

P.S.  addon:  After the js fails, the pushbutton to popup the calendar no longer enables/disables properly, although the entryfield does.

[Dimo]

Hello Timothy,

Thank you for the feedback. We inspected the code and made some improvements. Changes will take effect in the next RadControls version or in the next internal build.

In the meantime, you can do the following:

1. close the popups manually before disabling the datepickers. Use the hidePopup() method of the datepickers.
2. I suppose you are using shared calendars. Please switch to non-shared ones until you upgrade.

I have updated your Telerik points. Thank you.

Greetings,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Josh McDermott]

When I use the code below on a regular page without panel bars, the code below works just fine.

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

picker.set_enabled(false);

However, when I use this code on a datepicker nested in radpanelbars, it does not work.  How can I enable/disable a datepicker that is nested in radpanelbars?

Thank you in advance.

Josh

[Dimo]

Hello Josh,

The RadPanelBar ItemTemplate is a naming container. If you use a code block in the $find() method in this case, you will get a compilation error.

What you can do is assign the control's ClientID to some string property in PreRender and use this property in $find() instead.

Regards,
Dimo
the Telerik team

[Mahesh]

hello,

I am using following code  for enable/disabling the RadDatePicker but it disables only text box but click on calender button will popup the
date picker. How avoid this ..? 

function ShowHideRefreshItems() {

    var dp = $find("<%= rdpRefresh.ClientID %>");

    if (dp.get_enabled())

        dp.set_enabled(false);

    else

        dp.set_enabled(true);

}

[Shinu]

Hi Mahesh,

Unfortunately I cannot replicate your issue at my end. Please have a look at the following code I tried which works fine at my end.

ASPX:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
</telerik:RadDatePicker>
<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" Text="Disable"
    OnClientClicked="disabledatepicker">
</telerik:RadButton>

JavaScript:

<script type="text/javascript">
    function disabledatepicker(sender, args) {
        var dp = $find("<%= RadDatePicker1.ClientID %>");
        if (dp.get_enabled())
            dp.set_enabled(false);
        else
            dp.set_enabled(true);
    }
</script>

Thanks,
Shinu.