How do I restrict the RadTimePicker minute interval selection?

4 posts, 0 answers
  1. Paul
    Paul avatar
    8 posts
    Member since:
    May 2008

    Posted 15 Jun 2009 Link to this post

    In our system, the user can choose a minute input interval.  So, if a user chooses every 15 minutes, they would only be allowed to enter 00, 15, 30, or 45 in the minute’s field.  Using the RadTimePicker, what is the easiest way to achieve this behavior?

     

    Also, how do I change the RadTimePicker from am/pm to 24 hour time format programmatically?

  2. Daniel
    Admin
    Daniel avatar
    4949 posts

    Posted 16 Jun 2009 Link to this post

    Hello Paul,

    Please try the following approach:
    <asp:TextBox ID="TextBox1" runat="server" Text="01:00" OnTextChanged="TextBox1_TextChanged" 
        AutoPostBack="true" /> 
    <telerik:RadTimePicker ID="RadTimePicker1" runat="server"
        <TimeView StartTime="10:00" EndTime="16:00" TimeFormat="HH:mm" /> 
    </telerik:RadTimePicker> 

    protected void TextBox1_TextChanged(object sender, EventArgs e) 
        RadTimePicker1.TimeView.Interval = TimeSpan.Parse((sender as TextBox).Text); 

    More information about the date/time format patters is available in our documentation:
    Date Format Patterns

    Regards,
    Daniel
    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.
  3. Paul
    Paul avatar
    8 posts
    Member since:
    May 2008

    Posted 16 Jun 2009 Link to this post

    Setting the interval will limit the time popup display.  However, I also need to prevent the user from manually entering an invalid time such as in the above example of "01:14 am".  Currently I am using client side JavaScript on the date selection to accomplish this behavior (see below code).  Is there an easier way to achieve this behavior?

    <telerik:RadTimePicker ID="EarliestStart" runat="server" ClientEvents-OnDateSelected="TimeChanged" /> 

                    <script type="text/javascript">  
                        function TimeChanged(sender, eventArgs)   
                        {  
                            var newDate = eventArgs.get_newDate();  
                            var newMinutes = newDate.getMinutes();  
                            var remainder = newMinutes % 15;  
                            if (remainder != 0)   
                            {  
                                newMinutes = newMinutes - remainder;  
                                newDate.setMinutes(newMinutes);  
                                sender.set_selectedDate(newDate);  
                            }  
                        }  
                    </script> 
  4. Daniel
    Admin
    Daniel avatar
    4949 posts

    Posted 19 Jun 2009 Link to this post

    Hello Paul,

    As you properly noticed, the interval will affect the TimePopup only. Therefore you should use the client-side API to attain the desired functionality. I also believe your current approach is very good.

    Kind regards,
    Daniel
    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