Use ASP.NET Validators with the SharePoint:DateTimeControl

If you want to use asp.net validation system with the SharePoint’s DateTimeControl, the first thing you need to know is that this control is “just” a wrapper around simple ASP.NET controls (textbox, dropdownlist).

If you want to set the ControlToValidate property of an ASP.NET validator to the DateTimeControl’s ID, it will throw an error!
As you can guess, you have to target the controls inside the DateTimeControl.

Since the DateTimeControl set the name of the controls programmatically, you can retrieve the id of the control:

  • Textbox date: DateTimeControl.ID +”Date”
  • Dropdownlist hours: DateTimeControl.ID +”DateHours”
  • Dropdownlist minutes: DateTimeControl.ID +”DateMinutes”

Example:

If you use the SharePoint:DateTimeControl with the TimeOnly property set to “true”


<SharePoint:DateTimeControl runat="server" ID="TheTime" TimeOnly="true"/>

You’ll have two dropdownlists, one for the hours and one for the minutes
The DateTimeControl set the name:

Dropdownlist hours: DateTimeControl.ID +”DateHours”

Html will be:

<select name="ctl00$PlaceHolderMain$ctl07$ctl02$TheTime$TheTimeDateHours" id="ctl00_PlaceHolderMain_ctl07_ctl02_TheTime_TheTimeDateHours" dir="ltr">
 <option value="00:">00:</option>
 <option value="01:">01:</option>
 <option value="02:">02:</option>
 <option value="03:">03:</option>
 <option value="04:">04:</option>
 <option value="05:">05:</option>
 <option value="06:">06:</option>
 <option value="07:">07:</option>
 <option value="08:">08:</option>
 <option value="09:">09:</option>
 <option value="10:">10:</option>
 <option value="11:">11:</option>
 <option value="12:">12:</option>
 <option value="13:">13:</option>
 <option value="14:">14:</option>
 <option value="15:">15:</option>
 <option value="16:">16:</option>
 <option value="17:">17:</option>
 <option value="18:">18:</option>
 <option value="19:">19:</option>
 <option value="20:">20:</option>
 <option value="21:">21:</option>
 <option value="22:">22:</option>
 <option value="23:">23:</option>
</select>

Dropdownlist minutes: DateTimeControl.ID +”DateMinutes”
Html will be:

<select name="ctl00$PlaceHolderMain$ctl07$ctl02$TheTime$TheTimeDateMinutes" id="ctl00_PlaceHolderMain_ctl07_ctl02_TheTime_TheTimeDateMinutes" dir="ltr">
 <option value="00">00</option>
 <option value="05">05</option>
 <option value="10">10</option>
 <option value="15">15</option>
 <option value="20">20</option>
 <option value="25">25</option>
 <option value="30">30</option>
 <option value="35">35</option>
 <option value="40">40</option>
 <option value="45">45</option>
 <option value="50">50</option>
 <option value="55">55</option>
</select>

So you can retrieve the ASP.NET controls by using :

  • For the date: TheTime$TheTimeDate
  • For the hours: TheTime$TheTimeDateHours
  • For the minutes: TheTime$TheTimeDateMinutes

Real case example:

I have two DateTimeControl, one named TheStartTime and one other named TheEndTime,

I want to validate that the end time is not before the start time.

So I’ll use the ASP.NET comparevalidator validator to compare the hours:

<asp:CompareValidator id="valDate" runat="server" ControlToValidate="TheEndTime$TheEndTimeDateHours" ControlToCompare="TheStartTime$TheStartTimeDateHours"
 Type="Integer"
 Operator="GreaterThanEqual"
 ErrorMessage="The end time must be greater than the start time">
 </asp:CompareValidator >

Now, if you want to validate both hours and minutes, one option is to add an “asp:CustomValidator” and check conditions server side :
Markup:

<asp:CustomValidator runat="server" ID="EndTimeMustBeLaterThanStartTimeCustomValidator"
EnableClientScript="false" ErrorMessage="Start time must be before end time"/>

Before the action, validate:

if (!IsEndTimeLaterThanStartTime())
{
 EndTimeMustBeLaterThanStartTimeCustomValidator.IsValid = false;
 return;
}

Validation method:


private bool IsEndTimeLaterThanStartTime()
{
 // retrieve the DropDownList
 DropDownList startHours = TheStartTime.FindControl("TheStartTimeDateHours") as DropDownList;
 DropDownList endHours = TheEndTime.FindControl("TheEndTimeDateHours") as DropDownList;

 // prevent from errors
 if (startHours == null ||
 endHours == null ||
 string.IsNullOrEmpty(startHours.SelectedValue) ||
 string.IsNullOrEmpty(endHours.SelectedValue))
 {
 return; // dont' do anything
 }

// the hour value is "00:"
 int startHour = Convert.ToInt32(startHours.SelectedValue.Replace(":",""));
 int endHour = Convert.ToInt32(endHours.SelectedValue.Replace(":", ""));
 if (endHour < startHour)
 {
 args.IsValid = false;
 }
 else
 {

 if (endHour == startHour)
 {
 // check the minutes
 DropDownList startMinutes = TheStartTime.FindControl("TheStartTimeDateMinutes") as DropDownList;
 DropDownList endMinutes = TheEndTime.FindControl("TheEndTimeDateMinutes") as DropDownList;
 // prevent from errors
 if (startMinutes == null ||
 endMinutes == null ||
 string.IsNullOrEmpty(startMinutes.SelectedValue) ||
 string.IsNullOrEmpty(endMinutes.SelectedValue))
 {
 return; // dont' do anything
 }

 int startMinute = Convert.ToInt32(startMinutes.SelectedValue);
 int endMinute = Convert.ToInt32(endMinutes.SelectedValue);

 if (endHour <= startMinute)
 args.IsValid = false;

 }
 }

 args.IsValid = true;

 }

You can also validate the Date himself if you choose to display it,
you can make a client side validation if you know javascript,
you can do everything like in “classic” ASP.NET.

Incoming search terms:

  • sharepoint:datetimecontrol
  • UseASP NETValidatorswiththeSharePoint:DateTimeControl
  • share point compare validator
  • sharepoint 2010 DateTimeControl ErrorMessage You must specify a value for this required field Cannot be blank
  • sharepoint datetimecontrol set size
  • validate sharepoint datetimecontrol
  • value of sharepoint datetimecontrol not set javascript
  • compare 2 dates sharepoint datetime control
  • clientpicker sharepoint asp net validator
  • asp net compare validator date in sharepoint

About Sam Beauvois

Application Developer, .NET enthusiast since 2004, I'm interested in technology watch, usability, code quality, patterns & practices, UX, ...

2 comments

  1. admin says:

    Hi
    It was for Sharepoint 2007, maybe there are some changes with newer versions.

  2. ravi says:

    Great work Sam.
    I tried your code for hours validation only, but it not worked for me. Can u see into it.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>