How do I restrict the RadTimePicker minute interval selection?

[Paul]

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?

[Daniel]

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.

[Paul]

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>

[Daniel]

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.