Demonstrates how to calculate a duration from two TimeOfDayTextBoxes

<script type="text/javascript">

// Calculation takes two controls, either TimeOfDayTextBox or DurationTextBox
// Returns the time in milliseconds or null if either is blank
function GetDuration(pStartTmId, pEndTmId)
{
   var vStartTime = DES_GetDTTBValue(pStartTmId);
   var vEndTime = DES_GetDTTBValue(pEndTmId);
   if ((vStartTime == null) || (vEndTime == null))
      return null;
         
   return Math.abs(vEndTime - vStartTime);
}
// Calculation takes two TimeOfDayTextBox controls.
// Each MUST be connected to a DateTextBox control.
// Calculates the difference in seconds between two Date+Time pairs.
// Returns the time in milliseconds or null if any are blank or have illegal values.
function GetDurationWithDates(pStartTmId, pEndTmId)
{
   var vStartTime = DES_DnTMTBGetSecs(pStartTmId);
   var vEndTime = DES_DnTMTBGetSecs(pEndTmId);
   if ((vStartTime == window.gDES_GetNativeInvalid) ||  // illegal values or one of the pair is empty
      (vEndTime == window.gDES_GetNativeInvalid))
      return null;
   if ((vStartTime == null) ||  // both textboxes are empty
      (vEndTime == null))
      return null;
   return Math.abs(vEndTime - vStartTime);
}
// Attached to the onchange event via the OnChangeFunctionName property.
// The parameters are ignored here. This is simply a way to hookup this event.
// It is called by both TimeOfDayTextBoxes.
function Demo1Update(ID, Seconds, Error)
{
   var vLabel = DES_GetById('<% = Demo1Result.ClientID %>');
   var vDuration = GetDuration('<%= StartTODDemo1.ClientID %>', '<%= EndTODDemo1.ClientID %>');
   if (vDuration == null)
      vLabel.innerHTML = "n/a";
   else
      vLabel.innerHTML = DES_FmtTime(vDuration, 7, false);
}
// Attached to the TimeOfDayTextBox's onchange event via the OnChangeFunctionName property.
// The parameters are ignored here. This is simply a way to hookup this event.
// It is called by both TimeOfDayTextBoxes.
function Demo2UpdateTOD(ID, Seconds, Error)
{
   Demo2Update();
}
// Attached to the DateTextBox's onchange event via the OnChangeFunctionName property.
// The parameters are ignored here. This is simply a way to hookup this event.
// It is called by both DateTextBoxes.
function Demo2UpdateDTB(ID, Seconds, Error)
{
   Demo2Update();
}
// For Demo2: does the actual work.
function Demo2Update()
{
   var vDurationTB = DES_GetById('<% = DurationDemo2.ClientID %>');
   var vDuration = GetDurationWithDates('<%= StartTODDemo2.ClientID %>', '<%= EndTODDemo2.ClientID %>');
   if (vDuration == null)
      vDurationTB.style.display = "none";
   else
   {
      vDurationTB.style.display = "inline";
      DES_SetDTTBValue('<% = DurationDemo2.ClientID %>', vDuration, true);
   }
}
</script>
<h2>TimeOfDayTextBoxes updating a label</h2>
Start Time: <des:TimeOfDayTextBox id="StartTODDemo1" runat="server" OnChangeFunctionName="Demo1Update" OnChangeFunctionAlways="True"/> -
End Time: <des:TimeOfDayTextBox id="EndTODDemo1" runat="server" OnChangeFunctionName="Demo1Update" OnChangeFunctionAlways="True"/> =
<asp:Label id="Demo1Result" runat="server" />
<br/>
<des:CompareTwoFieldsValidator id="CompareValDemo1" runat="server" 
   ControlIDToEvaluate="StartTODDemo1" SecondControlIDToEvaluate="EndTODDemo1" Operator="LessThanEqual"
   ErrorMessage="End Time must be greater or equal to Start Time" >
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:CompareTwoFieldsValidator>
<des:DataTypeCheckValidator id="DTCValTOD1Demo1" runat="server" ControlIDToEvaluate="StartTODDemo1"
   ErrorMessage="Start time is invalid">
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:DataTypeCheckValidator>
<des:DataTypeCheckValidator id="DTCValTOD2Demo1" runat="server" ControlIDToEvaluate="EndTODDemo1"
   ErrorMessage="End time is invalid">
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:DataTypeCheckValidator>
<br/>
<h2>Date + TimeOfDayTextBoxes updating a DurationTextBox</h2>
Start Date+Time: <des:DateTextBox id="StartDateDemo2" runat="server" 
   OnChangeFunctionName="Demo2UpdateDTB" OnChangeFunctionAlways="True" CommandsFireOnChangeFunction="true" />
<des:TimeOfDayTextBox id="StartTODDemo2" runat="server" DateTextBoxControlID="StartDateDemo2"
   OnChangeFunctionName="Demo2UpdateTOD" OnChangeFunctionAlways="True" CommandsFireOnChangeFunction="true" /> -
End Date+Time: <des:DateTextBox id="EndDateDemo2" runat="server" 
   OnChangeFunctionName="Demo2UpdateDTB" OnChangeFunctionAlways="True" CommandsFireOnChangeFunction="true" />
<des:TimeOfDayTextBox id="EndTODDemo2" runat="server" DateTextBoxControlID="EndDateDemo2"
   OnChangeFunctionName="Demo2UpdateTOD" OnChangeFunctionAlways="True" CommandsFireOnChangeFunction="true"/> =
<des:DurationTextBox id="DurationDemo2" runat="server" />
<br/>
<des:CompareTwoFieldsValidator id="CompareValDemo2" runat="server" 
   ControlIDToEvaluate="StartTODDemo2" SecondControlIDToEvaluate="EndTODDemo2" Operator="LessThanEqual"
   DataType="DateTime"
   ErrorMessage="End Time must be greater or equal to Start Time" >
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:CompareTwoFieldsValidator>
<des:DataTypeCheckValidator id="DTCValTOD1Demo2" runat="server" ControlIDToEvaluate="StartTODDemo2"
   DataType="DateTime"
   ErrorMessage="Start date+time is invalid" >
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:DataTypeCheckValidator>
<des:DataTypeCheckValidator id="DTCValTOD2Demo2" runat="server" ControlIDToEvaluate="EndTODDemo2"
   DataType="DateTime"
   ErrorMessage="End date+time is invalid">
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:DataTypeCheckValidator>