Create a custom field type

namespace Sitecore.WFFM.Samples.Fields
{
  using System.Web.UI;
  using System.Web.UI.WebControls;
  using Sitecore.Form.Web.UI.Controls;
  using Sitecore.WFFM.Abstractions.Actions;
public class DatePickerUserControl : ValidateUserControl, IHasTitle
  {
    /// Here we define the controls that make the structure of the field 
    /// <summary>
    /// The control container
    /// </summary>
    private readonly Panel container = new Panel();
    /// <summary>
    ///  The input for the control
    /// </summary>
    private readonly TextBox input = new TextBox();
    /// <summary>
    ///  The title of the control
    /// </summary>
    private readonly Label title = new Label();
    public DatePickerUserControl()
    {
      this.CssClass = "scfDatePicker";
    }
    /// Implementation of the ihastitle interface to get the title that is entered in the Form Designer
    /// <summary>
    /// Gets or sets the title.
    /// </summary>
    /// <value>
    /// The title.
    /// </value>
    public string Title
    {
      get
      {
        return this.title.Text;
      }
      set
      {
        this.title.Text = value;
      }
    }
    /// The result of the control that will be used in the save actions and verification actions later
    /// <summary>
    /// Gets the result of clients' inputs.
    /// </summary>
    /// <value></value>
    public override ControlResult Result
    {
      get
      {
        return new ControlResult(this.ControlName, this.input.Text, null);
      }
      set
      {
      }
    }
    protected override Control ValidatorContainer
    {
      get
      {
        return this;
      }
    }
    protected override Control InnerValidatorContainer
    {
      get { return this.container; }
    }
  }
}

<%@ Control Language="C#" AutoEventWireup="true" Inherits="Sitecore.WFFM.Samples.Fields.DatePickerUserControl" %>
<div>
  <asp:Panel ID="datePickerBorder" CssClass="scfDatePickerBorder" runat="server">
    <asp:Label ID="title" AssociatedControlID="password" runat="server" CssClass="scfDatePickerLabel" Text="Date picker" />
    <asp:Panel ID="container" CssClass="scfDatePickerGeneralPanel" runat="server">
      <asp:TextBox MaxLength="256" AutoCompleteType="Disabled" CssClass="scfDatePickerTextBox" ID="input" runat="server">            
      </asp:TextBox>
    </asp:Panel>
  </asp:Panel>
</div>

namespace Sitecore.WFFM.Samples.Fields
{
  using System;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  using Sitecore.Form.Core.Attributes;
  using Sitecore.Form.Core.Visual;
  using Sitecore.Form.Web.UI.Controls;
  using Sitecore.WFFM.Abstractions.Actions;
  public class DatePicker : ValidateControl, IHasTitle
  {
    /// Here we define the controls that make the structure of the field 
    /// <summary>
    /// The control container
    /// </summary>
    private readonly Panel container = new Panel();
    /// <summary>
    ///  The help notes of the control
    /// </summary>
    private readonly Label helpNotes = new Label();
    /// <summary>
    ///  The input for the control
    /// </summary>
    private readonly TextBox input = new TextBox();
    /// <summary>
    ///  The title of the control
    /// </summary>
    private readonly Label title = new Label();
    public DatePicker()
      : base(HtmlTextWriterTag.Div)
    {
      this.CssClass = "scfDatePickerBorder";
    }
    /// Implementation of the ihastitle interface to get the title that is entered in the Form Designer
    /// <summary>
    /// Gets or sets the title.
    /// </summary>
    /// <value>
    /// The title.
    /// </value>
    public string Title
    {
      get
      {
        return this.title.Text;
      }
      set
      {
        this.title.Text = value;
      }
    }
    /// Implementation of the property that is set in the Form Designer 
    /// <summary>
    /// Gets or sets the help notes.
    /// </summary>
    /// <value>
    /// The help notes.
    /// </value>
    [VisualProperty("Help:", 500), VisualCategory("Appearance"), VisualFieldType(typeof(TextAreaField)), Localize]
    public string HelpNotes
    {
      get
      {
        return this.helpNotes.Text;
      }
      set
      {
        this.helpNotes.Text = value ?? string.Empty;
      }
    }
    /// The result of the control that will be used in the save actions and verification actions later
    /// <summary>
    /// Gets the result of clients' inputs.
    /// </summary>
    /// <value></value>
    public override ControlResult Result
    {
      get
      {
        return new ControlResult(this.ControlName, this.input.Text, null);
      }
      set
      {
      }
    }
    protected override Control ValidatorContainer
    {
      get
      {
        return this;
      }
    }
    protected override Control InnerValidatorContainer
    {
      get { return this.container; }
    }
    /// Creating the structure of the field
    /// <summary>
    /// Builds the control structure
    /// </summary>
    /// <param name="e">An <see cref="T:System.EventArgs"/> object that contains the event data.</param>
    protected override void OnInit(EventArgs e)
    {
      this.input.CssClass = "scfDatePickerTextBox";
      this.helpNotes.CssClass = "scfDatePickerUsefulInfo";
      this.container.CssClass = "scfDatePickerGeneralPanel";
      this.title.CssClass = "scfDatePickerLabel";
      this.input.TextMode = TextBoxMode.SingleLine;
      this.Controls.AddAt(0, this.container);
      this.Controls.AddAt(0, this.title);
      this.container.Controls.AddAt(0, this.helpNotes);
      this.container.Controls.AddAt(0, this.input);
    }
    /// <summary>
    /// Attaches jscripts to the page 
    /// </summary>
    /// <param name="e">The e.</param>
    protected override void OnPreRender(EventArgs e)
    {
      string script = "$(document).ready(function() { $('#" + this.input.ClientID + "').datepicker()";
      this.Page.ClientScript.RegisterClientScriptInclude("jquery", "/sitecore modules/web/web forms for marketers/scripts/jquery.js");
      this.Page.ClientScript.RegisterClientScriptInclude("jquery.ui", "/sitecore modules/web/web forms for marketers/scripts/jquery-ui.min.js");
      this.Page.ClientScript.RegisterStartupScript(this.GetType(), script, script, true);
      base.OnPreRender(e);
    }
  }
}