Getting Started Overview
This tutorial will walk you through creating a Web page that uses RadTimePicker control. It shows how to:
-
Use a RadTimePicker control
-
Apply skins to change the overall look and feel of the control
-
Apply styles to tweak the appearance of the controls.
-
Configure the selection and navigation behavior of the RadCalendar control.
-
Add messages to appear when nothing is entered in the RadTimePicker.
-
Specify formats for display and editing.
Adding a RadTimePicker control
-
Drag a RadTimePicker control from the toolbox onto your Web page,below the RadDateTimePicker control.
-
In the RadTimePicker properties pane, set the Skin property to "Outlook" so that it matches the RadCalendar and RadDatePicker controls:
-
In the Behavior section of the properties pane, expand the DateInput property and configure the embedded RadDateInput control:
- Set the DateFormat property to "h:mm tt". This is the format string for when embedded RadDateInput control has focus (when the user can enter its value).
- Set the DisplayDateFormat property to "HH:mm". This causes the embedded RadDateInput control to format its value using a 24-hour clock when it does not have focus.
- Set the EmptyMessage property to " Enter a Time ", providing a prompt when the value of the RadTimePicker control has not been set.
- Set the TimeView-Interval property to "00:15:00", to specify 15-minute time intervals in the time picker popup.
-
Expand the TimeView property. This lets you configure the properties of the embedded RadTimeView control that acts as a popup for choosing time values. Set its BackColor property to "#DDEEFF", just like you did for the RadDateTimePicker control.
Running the application
-
Run the application. The RadTimePicker control shows an empty message, because no value has been assigned yet. The "Outlook" skin is used by the control.
-
Select a time value for the RadTimePicker control. Note the formatting changes depending on whether the controls have focus.