Enable/Disable TimePicker in javascript

16 posts, 0 answers
  1. Greg
    Greg avatar
    48 posts
    Member since:
    Sep 2010

    Posted 11 Jan 2008 Link to this post

    Hi all,

    I found the example on how to disable the DatePicker in the help documentation, but I can't find one that shows how to enable/disable the time picker.  I'm also having trouble figuring out how to do it on my own.

    Any suggestions?

    Thanks for the help,

    Greg
  2. Petja
    Admin
    Petja avatar
    631 posts

    Posted 14 Jan 2008 Link to this post

    Hi Greg Dickie,

    Here is a sample code how you could achieve disable/enable of Prometheus RadTimePicker control:
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"
        <script type="text/javascript"
            var timepicker; 
            function pageLoad() 
            { 
                 timepicker = $find("<%= RadTimePicker1.ClientID %>"); 
            } 
            function disable() 
            { 
                timepicker.get_dateInput().disable(); 
                $removeHandler(timepicker.get__timePopupImage(), "click", timepicker._onTimePopupImageClickDelegate);    
            } 
     
            function enable() 
            { 
                timepicker.get_dateInput().enable(); 
                $addHandler(timepicker.get__timePopupImage(), "click", timepicker._onTimePopupImageClickDelegate);    
            } 
        </script> 
    </telerik:RadScriptBlock> 
     
    <telerik:RadTimePicker ID="RadTimePicker1" runat="server"
    </telerik:RadTimePicker> 

    We hope that helps.

    All the best,
    Petja
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Greg
    Greg avatar
    48 posts
    Member since:
    Sep 2010

    Posted 14 Jan 2008 Link to this post

    Thanks Petja that works great.

    Just a warning for others, the code below doesn't work if the time picker is initially disabled on the server side, but it works great for controls that are only enabled/disabled on the client side.
  5. Greg
    Greg avatar
    48 posts
    Member since:
    Sep 2010

    Posted 29 Jan 2008 Link to this post

    The example given was working with build 1310, but I recently upgraded to build 1314 and when I disable the time picker when the page loads and then navigate away from the page without enabling it, I get a javascript exception of: Error: Sys.InvalidOperationException: Handler was not added through the Sys.UI.DomEvent.addHandler method.

    When I debug the issue appears to be caused by this line:

    $removeHandler(_2,

    "click",this._onTimePopupImageClickDelegate);

    Let me know if I need to change something in my logic to accomodate changes that were made between the builds.

    Greg

  6. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 29 Jan 2008 Link to this post

    Hello Greg,

    Indeed it seems there are some changes to the event handler disposal logic between the two versions. Here is the modified snippet that works with the latest release:

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"
     
        <script type="text/javascript">  
        var timepicker; 
        var imageClickDelegate; 
         
        function pageLoad()  
        {  
             timepicker = $find("<%= RadTimePicker1.ClientID %>"); 
             imageClickDelegate = timepicker._onTimePopupImageClickDelegate; 
        } 
         
        function disable()  
        {  
            timepicker.get_dateInput().disable();  
            $removeHandler(timepicker.get__timePopupImage(), "click", timepicker._onTimePopupImageClickDelegate); 
            timepicker._onTimePopupImageClickDelegate = null
        }  
     
        function enable()  
        {  
            timepicker.get_dateInput().enable();  
            $addHandler(timepicker.get__timePopupImage(), "click", imageClickDelegate); 
            timepicker._onTimePopupImageClickDelegate = imageClickDelegate
        } 
        </script> 
     
    <href="#" onclick="enable();">enable</a> 
    <href="#" onclick="disable();">disable</a> 
     
    </telerik:RadScriptBlock> 
    <telerik:RadTimePicker ID="RadTimePicker1" runat="server"
    </telerik:RadTimePicker> 


    Hope this helps.


    Sincerely yours,
    Manuel
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  7. Greg
    Greg avatar
    48 posts
    Member since:
    Sep 2010

    Posted 29 Jan 2008 Link to this post

    Thanks for the super quick response Manuel.  I've got it working again.

    Greg
  8. Leslie Shkolnik
    Leslie Shkolnik avatar
    22 posts
    Member since:
    May 2006

    Posted 04 Apr 2008 Link to this post

    So in my scenario, I am dealing with a DatePicker that IS disabled server side on page load.  How do I enable/disable the control client side in this situation?

    Also, I have found two separate postings on how to deal with the enable/disable client side.  Which is the "correct" way?

    var dateControl = $find("<%= dateAbsoluteFrom.ClientID %>");
     $get(dateControl.get_DateInput().get_id() + "_text").disabled = "disabled";
    OR
    dateControl.get_dateInput().disable();

    and
     
     dateControl.get_PopupButton().onclick = function()
     {
     dateControl.TogglePopup();
     return false;
     };
    OR
    args.set_cancel(true);  in the popup event
    OR
    $addHandler(timepicker.get__timePopupImage(), "click" . . .
              (is this relevant for date picker also?)

  9. Leslie Shkolnik
    Leslie Shkolnik avatar
    22 posts
    Member since:
    May 2006

    Posted 04 Apr 2008 Link to this post

    I am using build 1218 of the Prometheus controls.
  10. Konstantin Petkov
    Admin
    Konstantin Petkov avatar
    1911 posts

    Posted 06 Apr 2008 Link to this post

    Hi Leslie,

    Please, upgrade to the latest RadControls Prometheus version and use PickerClientObject.set_enabled(false/true) method to disable/enable RadDatePicker client-side.

    All the best,
    Konstantin Petkov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  11. The Oracle
    The Oracle avatar
    46 posts
    Member since:
    Aug 2012

    Posted 27 Jun 2008 Link to this post

    Hey guys/gals--

    Something weird is going on here.  I tried your code, among other things, and it doesn't work.  I wonder if I have something out of sync, or maybe I'm supposed to be running core.js explicitly?

    For example, when I tried to execute your code on the radTimePicker, I get an error:

    code: picker.set_enabled(false)

    error: Object doesn't support this property or method

    But I can execute this code (either line works), with no problem:

    picker.set_enabled = false;  //works  
    picker.disabled = true;  //works  
     

    The documentation says do this, but it doesn't work either:

    var timepicker = $find("<%= RadTimePicker1.ClientID %>";   //works  
    timepicker.set_selectedDate(date);   //does not work  
    timepicker.get_dateInput().disable();   //does not work; stumbles on get_dateInput() with "object does not support this property or method"  
     

    I'm using version 619 of ASP.NET AJAX.

    Thanks,
    Graeme
  12. Konstantin Petkov
    Admin
    Konstantin Petkov avatar
    1911 posts

    Posted 30 Jun 2008 Link to this post

    Hello The Oracle,

    There is an error in your JS line -- the end line bracket is missing:

    var timepicker = $find("<%= RadTimePicker1.ClientID %>";   //works

    I suppose the script debugging is disabled in your IE. If you enable it, you can also add a debugger as a next line to see what methods/properties the "timepicker" object provides.

    I hope this helps.

    Best wishes,
    Konstantin Petkov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  13. The Oracle
    The Oracle avatar
    46 posts
    Member since:
    Aug 2012

    Posted 30 Jun 2008 Link to this post

    Hey, Konstantin--

    Thank you for pointing out my grammatical error!!! :-D

    Actually, that line is not my actual code.  I copied that line from one of Petja's entries, and I left off the end.  Sorry for wasting time.

    My actual question was about the functions listed in the documentation vs. what happens in reality.  Using debugger, I have found that a number of the properties/methods are not there, or are expressed differently.

    For example, the doc says I can use "picker.set_enabled(false);" but I found this doesn't work.  However, "picker.set_enabled = false;" does work.

    Is there something I am not doing right?  For example, should I list core.js in the ScriptManager?  Or does it look like my Telerik.Web.UI.dll is not in synch with the documentation?

    Any help with this would be GREATLY appreciated as converting to AJAX is hampered by these discrepancies.

    Thanks,
    Graeme
  14. Konstantin Petkov
    Admin
    Konstantin Petkov avatar
    1911 posts

    Posted 01 Jul 2008 Link to this post

    Hello,

    I've just tested that with the latest official Telerik.Web.UI.dll release, version labeled 2008.1.619. The example below functions properly on my end:

            <asp:ScriptManager id="ScriptManager1" runat="server"></asp:ScriptManager> 
            <telerik:RadDatePicker ID="RadDatePicker1" runat="server"></telerik:RadDatePicker> 
            <br /> 
            <script type="text/javascript"
                function disable() 
                { 
                  var picker = $find("<%= RadDatePicker1.ClientID %>"); 
                  picker.set_enabled(false); 
                } 
     
                function enable() 
                { 
                 var picker = $find("<%= RadDatePicker1.ClientID %>");        
                 picker.set_enabled(true); 
                }         
            </script> 
            <input type="button" value="disable" onclick="disable()" /> 
            <input type="button" value="enable" onclick="enable()" /> 
     

    Let us know if further assistance is needed.

    All the best,
    Konstantin Petkov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  15. The Oracle
    The Oracle avatar
    46 posts
    Member since:
    Aug 2012

    Posted 02 Jul 2008 Link to this post

    Dear Konstantin,

    I set up a small project and used your code.  It works.

    But it doesn't work in my app.  Here are the only clues I have so far.
    1. This used to be a r.a.d.Controls 'Classic' app. which I have converted.
    2. $find("<% = TimePicker1.ClientID %>") returns null.
    3. $get("<% = TimePicker1.ClientID %>") returns an object (tag=<SPAN>), but the object has no methods to speak of; hence your code fails.

    I feel I have something configured improperly.  Are these clues helpful, or can you shed some light on this is another way?

    Thanks so much for your enduring help.  Your team is AWESOME!

    Graeme


  16. The Oracle
    The Oracle avatar
    46 posts
    Member since:
    Aug 2012

    Posted 02 Jul 2008 Link to this post

    OK,

    I set up some buttons and script in a different form, but very similar.  The code works!

    However, I don't know why $find('clientid') fails in my other form.  Any ideas?

    Thanks,
    Graeme
  17. The Oracle
    The Oracle avatar
    46 posts
    Member since:
    Aug 2012

    Posted 02 Jul 2008 Link to this post

    Now this is getting weird.

    I added another TimePicker to the page that isn't working, and buttons and code: and it works!

    This doesn't make sense: the new code is in the same script block, and $find works fine.  Grr....

    Graeme
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017