Defining the date picker control

To define the date picker control, perform the following:

1. From the context menu of the project, click Add » New Item...

2. In the left pane, select Visual C# Items » Code.

3. Click Class and in the Name input field, enter DatePickerField.

4. Open the file in Visual Studio and add the following namespaces:

   using System.ComponentModel;

   using System.Web.Script.Serialization;

   using System.Web.UI;

   using System.Web.UI.WebControls;

   using Telerik.Sitefinity.Data.Metadata;

   using Telerik.Sitefinity.Metadata.Model;

   using Telerik.Sitefinity.Model;

   using Telerik.Sitefinity.Modules.Forms.Web.UI.Fields;

   using Telerik.Sitefinity.Web.UI;

   using Telerik.Sitefinity.Web.UI.ControlDesign;

   using Telerik.Sitefinity.Web.UI.Fields;

   using Telerik.Web.UI;

5. Change the class definition to:

   [DatabaseMapping(UserFriendlyDataType.Date)]

   public class DatePickerField : FieldControl, IFormFieldControl

   {

    

   }

6. Add a JavaScript serializer to the class:

   JavaScriptSerializer serializer = new JavaScriptSerializer();

7. Provide properties for common date picker fields:

   public string Minimum

   {

       get;

       set;

   }

    

   public string Maximum

   {

       get;

       set;

   }

    

   private IMetaField metaField;

    

   [TypeConverter(typeof(ExpandableObjectConverter))]

   public IMetaField MetaField

   {

       get

       {

           if (this.metaField == null)

           {

               this.metaField = this.LoadDefaultMetaField();

           }

    

           return this.metaField;

       }

       set

       {

           this.metaField = value;

       }

   }

8. Provide a property for accessing the value in the date picker that is currently selected:

   public override object Value

   {

       get

       {

           return this.DatePicker.SelectedDate;

       }

       set

       {

           this.DatePicker.SelectedDate = value as DateTime?;

       }

   }

9. Save the file.

You create properties for the minimum and the maximum dates that user can select, the value that is currently selected and the meta information. When defining the Value property you refer the DatePicker field from the template. For more information, see Referencing the template in the control.

Next, you must define the visuals of the date picker control. For more information, see Creating the template of the control.