Return to the menu Select another DES Module

Demonstrates how a DateTextBox and TimeOfDayTextBox can be combined to handle a single DateTime value

When you have a DateTime object that contains both date and time values, you may want a single data entry control to edit it. DES lets you connect its DateTextBox and TimeOfDayTextBox to manage the DateTime value. Here's how.

Add both a DateTextBox and TimeOfDayTextBox. Connect them by setting the DateTextBox's ID in the TimeOfDayTextBox.DateTextBoxControlID property. Once connected, several features are available:

Get and set a System.DateTime value in the TimeOfDayTextBox.DateTimeValue property. If you are using databinding or interacting with a database, consider the DateTimeBindable property as it handles a variety of datatypes, including null and System.DbNull.Value.
The TimeOfDayTextBox commands for next and previous hours/minutes will change the Date as you hit midnight.
The Now command sets both Date and Time textboxes and is available in the DateTextBox commandset.
Any validator that offers a DataType property can evaluate the combined DateTime value by setting its ControlIDToEvaluate property to the TimeOfDayTextBox and setting DataType="DateTime". This is shown in the validators of this example.

Always use a DataTypeCheckValidator on these controls. You can have one evaluating the combined DateTime, as described above and shown in this example. Alternatively, have separate DataTypeChecKValidators, one for each textbox. If you do that, you will not need to set the DataType property.

Controls

DateTimeValue

Initially shows the current date and time which is set in Page_Load. On postback, it retrieves the DateTimeValue in the Button1_Click method. This example also has a RangeValidator that demands all entries are +/- 1 week at 12 noon.

July 2024

Select a Different Month (Keyboard shortcut: M)

Date and Time returned:

Using DateTimeBindable and databinding

A DateTime using the current date and time is defined in ASP.NET markup for the DateTimeBindable property and DataBind is called in Page_Load. On postback, it's retrieved in Button2_Click.

Date and Time returned:

Source Code (C#)

<script runat="server">
   protected void Page_Load(object sender, EventArgs e)
   {
      if (!IsPostBack)
      {
         // set the initial value. Create a DateTime value and assign it TimeOfDayTextBox1.DateTimeValue.
         TimeOfDayTextBox1.DateTimeValue = DateTime.Now;
         // If databinding, use TimeOfDayTextBox.DateTimeBindable in the markup and call DataBind on the control
         TimeOfDayTextBox2.DataBind();
      }
      // establish the valid range in the RangeValidator as 7 days ago at 12 noon
      // to 7 days from now at 12 noon
      RangeValidator1.MinimumAsNative = DateTime.Today.AddDays(-7).AddHours(12);
      RangeValidator1.MaximumAsNative = DateTime.Today.AddDays(7).AddHours(12);
   }
   protected void Button1_OnClick(object sender, EventArgs e)
   {
      if (PeterBlum.DES.Globals.WebFormDirector.IsValid)
      {
         // save the data
         // The Date+Time value is found in TimeOfDayTextBox1.DateTimeValue
         if (TimeOfDayTextBox1.IsEmpty)
            DateTimeLabel1.Text = "Blank textboxes";
         else
            DateTimeLabel1.Text = TimeOfDayTextBox1.DateTimeValue.ToString();
      }
   }
   protected void Button2_OnClick(object sender, EventArgs e)
   {
      if (PeterBlum.DES.Globals.WebFormDirector.IsValid)
      {
         // save the data
         // The Date+Time value is found in TimeOfDayTextBox2.DateTimeBindable
         if (TimeOfDayTextBox1.IsEmpty)
            DateTimeLabel2.Text = "Blank textboxes";
         else
            DateTimeLabel2.Text = TimeOfDayTextBox2.DateTimeBindable.ToString();
      }
   }
   
</script>

<h2>DateTimeValue</h2>
Initially shows the current date and time which is set in Page_Load. On postback, it retrieves
the DateTimeValue in the Button1_Click method. This example also has a <a href="../../Validation/Validators/Controls/RangeValidator.aspx" class="ControlClass">RangeValidator</a>
that demands all entries are +/- 1 week at 12 noon.<br/><br/>
<des:DateTextBox ID="DateTextBox1" runat="server"/>
<des:TimeOfDayTextBox ID="TimeOfDayTextBox1" runat="server" DateTextBoxControlID="DateTextBox1"  />
<des:DataTypeCheckValidator ID="DataTypeCheckValidator1" runat="server" 
   ControlIDToEvaluate="TimeOfDayTextBox1" DataType="DateTime" Group="DTB1"
   ErrorMessage="Illegal format. Both textboxes must be assigned. The first is a date. The second is a time.">
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:DataTypeCheckValidator>
<des:RangeValidator ID="RangeValidator1" runat="server" ControlIDToEvaluate="TimeOfDayTextBox1"
   DataType="DateTime" Group="DTB1" 
   ErrorMessage="Between {MINIMUM} and {MAXIMUM}." >
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:RangeValidator>
<br/>
<des:Button ID="Button1" runat=server Text="Submit" Group="DTB1" OnClick="Button1_OnClick" />
<br/>
Date and Time returned:<asp:Label ID="DateTimeLabel1" runat="server" />
<br/><br/>
<h2>Using DateTimeBindable and databinding</h2>
A DateTime using the current date and time is defined in ASP.NET markup for the <span class="PropertyName">DateTimeBindable</span> property
and DataBind is called in Page_Load. On postback, it's retrieved in Button2_Click.<br/><br/>
<des:DateTextBox ID="DateTextBox2" runat="server" />
<des:TimeOfDayTextBox ID="TimeOfDayTextBox2" runat="server" 
   DateTextBoxControlID="DateTextBox2" DateTimeBindable="<%# DateTime.Now%>" />
<des:DataTypeCheckValidator ID="DataTypeCheckValidator2" runat="server" 
   ControlIDToEvaluate="TimeOfDayTextBox2" DataType="DateTime" Group="DTB2"
   ErrorMessage="Illegal format. Both textboxes must be assigned. The first is a date. The second is a time.">
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:DataTypeCheckValidator>
<br/>
<des:Button ID="Button2" runat=server Text="Submit" Group="DTB2" OnClick="Button2_OnClick" /> 
Date and Time returned:<asp:Label ID="DateTimeLabel2" runat="server" />

Return to the menu Select another DES Module