Datepicker hotkeys

2 posts, 1 answers
  1. it-workz
    it-workz 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>    
     
  2. Answer
    Sebastian
    Admin
    Sebastian avatar
    9934 posts

    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