Return to the menu Select another DES Module

Demonstrates two DateTextBoxes interconnected as a Range

If you want a range represented by two DateTextBoxes, add all of them to your web form. Assign the RangeEndControlID on the starting DateTextBox to the ID of the ending DateTextBox. This will force the starting date to be less than or equal to the ending date. The range is checked after the user exits the field or uses any of the editing commands. If the start field has exceeded the end, the field that was not edited is set to match the date just edited.

Here are the Date Range properties. They are only set on the Start DateTextBox:

RangeEndControlID - Establishes the range feature. Assign the ID of the End DateTextBox.
RangeEndControl - Alternative to RangeEndControlID that takes a reference to the End DateTextBox object.
RangeMinDays – Normally the start and end DateTextBoxes can both be assigned to the same date. If you want to keep them separate by a certain number of days, enter the number of days here on the start of the range field. (Its value is ignored on the end of range field.) For example, to keep them a minimum of one week apart, assign RangeMinDays to 7. A value of 0 allows them to be assigned to the same date. It defaults to 0.
RangeFillInBlank – The End DateTextBox can automatically fill in with a date, when it is blank and the user has entered a start date. Just set RangeFillInBlank to true. It will use the start date + the number of days in RangeMinDays. It also works in reverse, where you fill in the end date and it fills in the Start DateTextBox. When false, the blank textbox will not be changed. It defaults to false.
RangeEndSetsMinDate – Normally when range mode is set up, if the user edits the end date to a value below the start date, the start date will be updated to a value below or equal to the end date. Use this to prevent the user from entering a date in the end date that is below the start date. This effectively imposes a minimum date on the End DateTextBox based on the start datetextbox’s value + RangeMinDays.When true, the minimum is imposed. When false, it is not. It defaults to false.
RangeMinErrorMsg – When using RangeEndSetsMinDate, this is an error message that is shown in an alert box if the user attempts to move the end date below the minimum.
It defaults to “The second date must not be set below the first date.”.

Controls

Basic setup

Start must be less than or equal to the End date. Enter similar dates. A shortcut: type T for today into each textbox. Use the up and down arrows to advance the date.

Start

December 2024 Select a Different Month (Keyboard shortcut: M)

Bad data
End

Bad data

RangeMinDays=2

Start must be at least two days less than the End date. Enter similar dates. A shortcut: type T for today into each textbox. Use the up and down arrows to advance the date.

Start

Bad data
End

Bad data

RangeFillInBlank and RangeEndSetsMinDate

Enter a date into the start date. It updates the empty End DateTextBox. Popup the calendar for the End DateTextBox to see the calendar will not allow selecting dates below the start date.

Start

Bad data
End

Bad data
Out of range Make Start < End Date

Source Code (C#)

<script runat="server">
   protected void Button1_Click(object sender, EventArgs e)
   {
      if (PeterBlum.DES.Globals.WebFormDirector.IsValid)
      {
         // save the data
      }
   }
   
</script>

<h2>Basic setup</h2>
Start must be less than or equal to the End date. Enter similar dates. A shortcut: type T for today into each textbox.
Use the up and down arrows to advance the date.<br/><br/>
Start
<des:DateTextBox id="StartDateTextBox" runat="server" RangeEndControlID="EndDateTextBox" ></des:DateTextBox>
<des:DataTypeCheckValidator ID="StartDTC" runat="server" ControlIDToEvaluate="StartDateTextBox" ErrorMessage="Bad data" />
<br/>
End
<des:DateTextBox id="EndDateTextBox" runat="server"></des:DateTextBox>
<des:DataTypeCheckValidator ID="EndDTC" runat="server" ControlIDToEvaluate="EndDateTextBox" ErrorMessage="Bad data" />
<br/>
<br/>

<h2>RangeMinDays=2</h2>
Start must be at least two days less than the End date. Enter similar dates. A shortcut: type T for today into each textbox.
Use the up and down arrows to advance the date.<br/><br/>
Start
<des:DateTextBox id="StartDateTextBox2" runat="server" RangeEndControlID="EndDateTextBox2" RangeMinDays="2" ></des:DateTextBox>
<des:DataTypeCheckValidator ID="StartDTC2" runat="server" ControlIDToEvaluate="StartDateTextBox2" ErrorMessage="Bad data" />
<br/>
End
<des:DateTextBox id="EndDateTextBox2" runat="server"></des:DateTextBox>
<des:DataTypeCheckValidator ID="EndDTC2" runat="server" ControlIDToEvaluate="EndDateTextBox2" ErrorMessage="Bad data" />
<br/>
<br/>
<h2>RangeFillInBlank and RangeEndSetsMinDate</h2>
Enter a date into the start date. It updates the empty End DateTextBox. Popup the calendar for the End DateTextBox
to see the calendar will not allow selecting dates below the start date. <br/><br/>
Start
<des:DateTextBox id="StartDateTextBox3" runat="server" RangeEndControlID="EndDateTextBox3" 
   RangeFillInBlank="True" RangeEndSetsMinDate="True" ></des:DateTextBox>
<des:DataTypeCheckValidator ID="StartDTC3" runat="server" ControlIDToEvaluate="StartDateTextBox3" ErrorMessage="Bad data" />
<br/>
End
<des:DateTextBox id="EndDateTextBox3" runat="server"></des:DateTextBox>
<des:DataTypeCheckValidator ID="EndDTC3" runat="server" ControlIDToEvaluate="EndDateTextBox3" ErrorMessage="Bad data" />
<br/>
<des:RangeValidator ID="RangeValidator1" runat="server" ControlIDToEvaluate="EndDateTextBox3"
   ErrorMessage="Out of range">
</des:RangeValidator>
<des:CompareTwoFieldsValidator ID="CompareTwoFieldsValidator1" runat="server" ControlIDToEvaluate="StartDateTextBox3"
   SecondControlIDToEvaluate="EndDateTextBox3" Operator="LessThan" ErrorMessage="Make Start &lt; End Date" />
<br/>
<br/>
<des:Button ID="Button1" runat="server" /><br/>

Return to the menu Select another DES Module