Return to the menu Select another DES Module

Demonstrates the TimePicker

The TimePicker allows the user to pick a time from a list. There are extensive properties found in the TimeOfDayTextBox.PopupTimePicker and TimeOfDayTextBox.PopupTimePicker.TimePicker properties.

To show this control, set TimeOfDayTextBox.PopupTimePicker.Activate to true and add one or more items to the TimeOfDayTextBox.PopupTimePicker.TimePicker.Items collection.

Auto Fill

These properties defined on TimeOfDayTextBox.PopupTimePicker "auto fill" the TimeOfDayTextBox.PopupTimePicker.TimePicker.Items collection:

AutoFillStartTime - A TimeSpan containing the start of a time range.
AutoFillEndTime - A TimeSpan containing the end of the time range.
AutoFillIncrement - The number of minutes between each time added to the list.
AutoFillTitle - When assigned, a title row with this text appears before the first time shown.
AutoFillTitle2 - When assigned, a title row with this text appears before the time specified by the AutoFillTitle2After property.
AutoFillTitle2After - A TimeSpan where the AutoFillTitle2 title appears. It defaults to 12:00:00 (noon).

Programmatically add times

You can populate the collection programmatically.

TimeOfDayTextBox.PopupTimePicker.AddTimes() - This method works much like the AutoFill features. There are 4 overloaded versions that take a time range, increments and titles.
TimeOfDayTextBox.PopupTimePicker.TimePicker.Items.SmartAdd() - This method adds one item depending on its type. If its a TimeSpan or DateTime, it becomes a selectable time value. If its a string, it becomes a title.
You can also add these objects directly to TimeOfDayTextBox.PopupTimePicker.TimePicker.Items:
- PeterBlum.DES.Web.WebControls.SpecialTimeValue - Adds one time value. It can be marked unselectable, making it appear disabled in the TimePicker and if entered, get reported as an error when using then UnselectableTimesValidator.
- PeterBlum.DES.Web.WebControls.SpecialTimeText - Adds text to a cell.
- PeterBlum.DES.Web.WebControls.SpecialTimeTitle - Adds a title row with the specified text
- PeterBlum.DES.Web.WebControls.SpecialTimeNoValue - Adds a cell to indicate "no value". It is a selectable cell.

Use the UnselectableTimesValidator when you have a TimePicker to require that times entered into the textbox are on the TimePicker's list. Always add this validator if you have defined unselectable times (using the SpecialTimeValue object.)

If you want to change the default style sheets used for the container of the row its cells, their styles are defined in the [web app]\DES\Appearance\Date And Time\TimePicker.css file.

These examples use the TimeOfDayTextBox but also work with DurationTextBox.

Controls

Example 1

Uses the Auto Fill features to establish the times.

Example 2

Uses the Auto Fill features to establish a time range and customize the titles.
It also uses the UnselectableTimesValidator to require that times typed into the textbox are also in the TimePicker's list.

Example 3

Defining the values programmatically in Page_Load using TimeOfDayTextBox.PopupTimePicker.AddTimes().

Example 4

Customizing the appearance.

Example 5

Popup when focus is in the textbox and when the mouse passes over the toggle button:

Source Code (C#)

<script runat="server">
   protected void Page_Load(object sender, EventArgs e)
   {
     // here is one way to populate the TimePicker manually. There are several versions of the AddTimes method.
      TimeOfDayTextBox3.PopupTimePicker.AddTimes(new TimeSpan(10, 0, 0), new TimeSpan(18, 0, 0), 20);
     // you can also add values directly to the TimePicker.Items collection
      TimeOfDayTextBox3.PopupTimePicker.TimePicker.Items.Add(new PeterBlum.DES.Web.WebControls.SpecialTimeNoValue("None"));
   }
   
</script>

<h2>Example 1</h2>
Uses the Auto Fill features to establish the times.<br/><br/>
<des:TimeOfDayTextBox ID="TimeOfDayTextBox1" runat="server" AutoHint="false">
   <PopupTimePicker Activate="true" AutoFillStartTime="9:00:00" AutoFillEndTime="17:00:00"
      AutoFillIncrement="30" >
      <TimePicker SharedGroup="G1" />
   </PopupTimePicker>
</des:TimeOfDayTextBox>
<des:DataTypeCheckValidator ID="DataTypeCheckValidator1" runat="server" ControlIDToEvaluate="TimeOfDayTextBox1"
   ErrorMessage="Illegal format" />
<br/><br/>
<h2>Example 2</h2>
Uses the Auto Fill features to establish a time range and customize the titles.<br/>
It also uses the UnselectableTimesValidator to require that times typed into the textbox
are also in the TimePicker's list.<br/><br/>
<des:TimeOfDayTextBox ID="TimeOfDayTextBox2" runat="server" AutoHint="false">
   <PopupTimePicker Activate="true" AutoFillStartTime="11:00:00" AutoFillEndTime="22:00:00"
      AutoFillIncrement="60" AutoFillTitle="First Shift" AutoFillTitle2="Second Shift" AutoFillTitle2After="16:00:00">
      <TimePicker SharedGroup="G2" />
   </PopupTimePicker>
</des:TimeOfDayTextBox>
<des:DataTypeCheckValidator ID="DataTypeCheckValidator2" runat="server" ControlIDToEvaluate="TimeOfDayTextBox2"
   ErrorMessage="Illegal format" >
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:DataTypeCheckValidator>
<des:UnselectableTimesValidator ID="UnselectableTimesValidator1" runat="server"
   ControlIDToEvaluate="TimeOfDayTextBox2" ErrorMessage="That time is not available.">
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:UnselectableTimesValidator>
<br/><br/>
<h2>Example 3</h2>
Defining the values programmatically in Page_Load using TimeOfDayTextBox.PopupTimePicker.AddTimes().<br/><br/>
<des:TimeOfDayTextBox ID="TimeOfDayTextBox3" runat="server" AutoHint="false">
   <PopupTimePicker Activate="true" >
      <TimePicker SharedGroup="G3" />
   </PopupTimePicker>
</des:TimeOfDayTextBox>
<des:DataTypeCheckValidator ID="DataTypeCheckValidator3" runat="server" ControlIDToEvaluate="TimeOfDayTextBox3"
   ErrorMessage="Illegal format" />
<br/><br/>
<h2>Example 4</h2>
Customizing the appearance.<br/><br/>
<des:TimeOfDayTextBox ID="TimeOfDayTextBox4" runat="server" AutoHint="false">
   <PopupTimePicker Activate="true" AutoFillStartTime="9:00:00" AutoFillEndTime="17:00:00"
      AutoFillIncrement="30" ToggleImageUrl="{APPEARANCE}Shared/DnArrow1.GIF" >
      <TimePicker NumColumns="4" CloseButtonText="Cancel" TimeFormat="Hr24"
         SharedGroup="G4" />
   </PopupTimePicker>
</des:TimeOfDayTextBox>
<des:DataTypeCheckValidator ID="DataTypeCheckValidator4" runat="server" ControlIDToEvaluate="TimeOfDayTextBox4"
   ErrorMessage="Illegal format" />
<br/><br/>
<h2>Example 5</h2>
Popup when focus is in the textbox and when the mouse passes over the toggle button:<br/>
<des:TimeOfDayTextBox ID="TimeOfDayTextBox5" runat="server" AutoHint="false"  AutoPopupOnFocus="true">
   <PopupTimePicker Activate="true" AutoFillStartTime="9:00:00" AutoFillEndTime="17:00:00"
      AutoFillIncrement="30" PopupOnMouseOver="true" >
      <TimePicker SharedGroup="G5" />
   </PopupTimePicker>
</des:TimeOfDayTextBox>
<des:DataTypeCheckValidator ID="DataTypeCheckValidator5" runat="server" ControlIDToEvaluate="TimeOfDayTextBox5"
   ErrorMessage="Illegal format" />
<br/><br/>

Return to the menu Select another DES Module