Datepicker hotkeys

Thread is closed for posting
2 posts, 1 answers
  1. 185ADD70-F023-498B-8523-0E97D64F2E8F
    185ADD70-F023-498B-8523-0E97D64F2E8F avatar
    22 posts
    Member since:
    Mar 2007

    Posted 21 Jul 2009 Link to this post

    Requirements
    RadControls for ASP .NET AJAX version

    2008.1.415 and later
    .NET version

    2.0 and later
    Visual Studio version

    2005 and later
    Programming language

    Javascript
    Browser support

    all browsers supported by RadControls for ASP .NET AJAX

    PROJECT DESCRIPTION
    I've made a simple javascript that allows some keys to be used as hotkey in a datepicker.
    In this example if a + is pressed, the selected date jumps up a week, and if - is pressed it jumps down a week:
    <telerik:RadDatePicker ID="RadDatepicker1" runat="server" Skin="Office2007">     
       <DateInput onkeydown="_hotkey_OnKeyDown(event)" />    
    </telerik:RadDatePicker>    
        
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">     
    <script language="javascript" type="text/javascript">       
    //<![CDATA[   
       
    function _hotkey_OnKeyDown(e)   
    {   
        if (e.keyCode == 107)   
        {    
        var dp = $find("<%=RadDatepicker1.ClientID%>");  
        var date = dp.get_selectedDate();  
        date.setDate(datum.getDate() +7);  
         dp.set_selectedDate(date);  
        }   
        if (e.keyCode == 109)   
        {    
        var dp = $find("<%=RadDatepicker1.ClientID%>");  
        var date = dp.get_selectedDate();  
        date.setDate(datum.getDate() -7);  
         dp.set_selectedDate(date);  
        }   
    }   
       
    //]]>       
    </script>    
    </telerik:RadCodeBlock>    
     
  3. Answer
    C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    Posted 24 Jul 2009 Link to this post

    Hello Bob,

    Thank you for the submission.

    Since there were some discrepancies in the code (duplicated code sections inside the if blocks and the usage of non-initilized datum javascript variable), I updated the example and included some code to focus the date input once you selected a date from the popup calendar. I also preselect the today's date on initial load.

    Here is the final version of the sample:

           <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
     
                    <script language="javascript" type="text/javascript">          
                    //<![CDATA[       
                           
                    function _hotkey_OnKeyDown(evt)       
                    {       
                        var dp = $find("<%=RadDatepicker1.ClientID%>");      
                        var date = dp.get_selectedDate();     
                          
                        if (evt.keyCode == 107)       
                        {          
                          date.setDate(date.getDate() + 7);      
                          dp.set_selectedDate(date);   
                            
                          evt.cancelBubble = true;  
                          evt.returnValue = false;  
     
                            if (evt.stopPropagation)  
                            {  
                               evt.stopPropagation();  
                               evt.preventDefault();  
                            }     
                        }       
                        if (evt.keyCode == 109)       
                        {         
                          date.setDate(date.getDate() - 7);      
                          dp.set_selectedDate(date);  
                            
                          evt.cancelBubble = true;  
                          evt.returnValue = false;  
     
                            if (evt.stopPropagation)  
                            {  
                               evt.stopPropagation();  
                               evt.preventDefault();  
                            }      
                        }       
                    }       
                    function DateSelected(sender, eventArgs)  
                    {  
                      sender.get_textBox().focus();  
                    }  
                           
                    //]]>          
                    </script>  
     
                </telerik:RadCodeBlock> 

                <telerik:RadDatePicker ID="RadDatepicker1" runat="server" Skin="Office2007">  
                    <DateInput onkeydown="_hotkey_OnKeyDown(event)" /> 
                    <ClientEvents OnDateSelected="DateSelected" /> 
                </telerik:RadDatePicker> 

        protected void Page_Load(object sender, EventArgs e)  
        {  
            if (!Page.IsPostBack)  
            {  
                RadDatepicker1.SelectedDate = DateTime.Now;  
            }  
        } 

    I updated your Telerik points for the involvement.

    Kind regards,
    Sebastian
    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.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.