DateTimeControl Control

SharePoint also offers a DateTime picker control that you can use in your web parts and application pages. This control has the name DateTimeControl and is located in the Microsoft.SharePoint.WebControls namespace of the Microsoft.SharePoint.dll. The date picker control looks like the following:

The control consists of two parts: the date part and the time part. Click the calendar icon if you want to pick a date.

You can place it on your application page as follows:

<spuc:DateTimeControl runat="server" ID="DateTimePickerControl1" />

After having added the required directive at the top of the page:

<%@ Register TagPrefix="spuc" Namespace="Microsoft.SharePoint.WebControls"
             Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

The most important properties are:

• SelectedDate: this gives you the date that has been set by the user. You can also set this property in code.
• ErrorMessage: you can customize the error message by setting this property.
• MaxDate: you can specify a maximum date, f.e. if a date cannot be set in the future like a birthdate.
• MinDate: you can specify a minimum date, f.e if a date cannot be set in the past.
• AutoPostPack: you can set this property to true if you want the control to react on a user selection. In that case you have to trigger the DateChanged event.
• IsRequiredField: you can specify if the user must choose a date or if its optional.

You can also set properties to influence the rendering of the control:

• DateOnly: When set to true, you will only see the date part.
• TimeOnly: When set to true, you will only see a time part.
• Calendar: this property is of the SPCalendarType and can be used to change the type of calendar

            

• FirstDayOfWeek: this is an integer value in the range 0 to 6 that indicates the first day of the week displayed in the DatePicker; where 0 indicates Sunday, 1 indicates Monday, and so on. The default is 0 (Sunday). Here in Europe we consider Monday as first day of the week (as a free Sunday is a remuneration for the hard work during the week :).
• FirstWeekOfYear: this is an integer value that indicates the first week of the year displayed in the DatePicker. Allowed values are: 0 (the week in which January 1 occurs), 1 (the first week that has at least four days in the new year), or 2 (the first full week of the year). The default is 0 (the week in which January 1 occurs).
• HijriAdjurstment: Sets or retrieves the number of days to add or subtract from the calendar to accommodate the variances in the start and the end of Ramadan and to accommodate the date difference between countries/regions.
• HoursMode24: here you can specify if you want the AM/PM notation, which is the default, or the 24 hour notation like in the image

             

• LocaleID: sets or retrieves the control’s locale identifier.
• ShowWeekNumber: if this property is set to true, the week number is rendered in the DatePicker at the beginning of each week.

             

• TimeZoneID: you can set this property if you need to show the time in another time zone.
• UseTimeZoneAdjustment: sets or retrieves a value that indicates whether the time values in the control are automatically adjusted for daylight savings time.
• WorkWeek: Sets or retrieves a seven-character string that indicates the work days in a week. (I tested it but it didn’t change a thing in the DatePicker).

More exotic properties are:

• DatePickerJavascriptUrl: you can make the control execute your own javascript control by setting this property with the URL where your javascript is located ( f.e. http://litwareinc.com/_layouts/myDatePicker.js).
• DatePickerFrameUrl
• OnValueChangeClientScript

If you want to use the date picker control in a web part you have to add the control in code.

DateTimeControl datetimepicker;

protected override void CreateChildControls()

{

        base.CreateChildControls();

        datetimepicker= new DateTimeControl();

        datetimepicker.ID = "datetimeControl1";

        this.Controls.Add(datetimepicker);

        // initialize other controls

}

If in your code you want to test if the user selected a date in the DateTimeControl, you have to use the IsDateEmpty property instead of the SelectedDate. If the user didn’t enter a date, the SelectedDate property will return today’s date.

 

protected void Submit()

{

      Customer newCustomer = new Customer();

      newCustomer.Name = "Company A";

      if (!datetimepicker.IsDateEmpty)

      {

          newCustomer.StartDate = datetimepicker.SelectedDate;

      }

}