ASP.Net wrapper control for JQuery datetime picker

Question

I'm looking to create a wrapper control for JQuery date time picker control to be used in asp.net website. Once the user control is ready, it will be used in simple web forms / grids / data lists or repeater controls. User control will also expose below mentioned properties for customization.

1. TimeHourFormat: "12" or "24" (12 (AM/PM) or 24 hour)
2. TimeAMPMCondense: True (If 12 hour format, display AM/PM with only 1 letter and no space i.e. 1:00A or 5:05P)
3. TimeFormat: "HH/MM" (Leading zeros on Hours and Minutes. Default to always have leading zeros.)
4. CssClass: "calendarClass" (Name of the CSS class/style sheet for formatting)
5. ReadOnly: True (Set textbox to readonly mode and disable pop up calendar If false, then enable pop up calendar and enable access to textbox)
6. DateFormat: "MM/DD/YYYY" (Pass C# standard formatting to also include YY no century formats. Default to always have leading zeros and century.)
7. Display: "C" (Pass C to display Calendar only, CT for Calendar and Time, and T for time only display)
8. Placement: "Popup" (Default for pop up of the control, could also be inline)
9. DateEarly: "01/01/1900" (If date is equal to or less than, then display and return a null (blank) value)
10. WeekStart: "Sun" (Day of week to start calendar)
11. Image: "/image/calendar.ico" (Name and path to use for the image used on the right of the textbox to click and have it display. If not specified, then clicking in the enabled field will 'pop up' the control.)

Follow the JQuery Date Time Picker Implementation. See Demo in action.

I'm open for any idea or suggestion. Feel free to comment or share your ideas.

Thanks in advance.

Answer 1

I take it you want to create a re-useable control that uses jQuery functionality and wraps everything up nicely? If I've understood you correctly you need to create an IScriptControl.

Create two files in your project, i.e:

Project
|...Controls
    |...MyDateTimePicker.cs
    |...MyDateTimePicker.js

Set MyDateTimePicker.js as an embedded resource and then add the following line to your assembly info:

[assembly: System.Web.UI.WebResource("Project.Controls.MyDateTimePicker.js", "text/javascript")]

Once you've done that, go to the MyDateTimePicker.cs class and create a basic template as follows:

[DefaultProperty("ID")]
[ToolboxData("<{0}:MyDateTimePicker runat=server />")]
public class MyDateTimePicker : WebControl, IScriptControl
{

}

Once you've done that, you need to register the control as a ScriptControl, so add the following:

protected override void OnPreRender(EventArgs e)
{

    if (!this.DesignMode)
    {

        // Link the script up with the script manager
        ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
        if (scriptManager != null)
        {
            scriptManager.RegisterScriptControl(this);
            scriptManager.RegisterScriptDescriptors(this);
            scriptManager.Scripts.Add(new ScriptReference(
                "Project.Controls.MyDateTimePicker.js", "Project"));
        }
        else
        {
            throw new ApplicationException("You must have a ScriptManager on the Page.");
        }

    }

    base.OnPreRender(e);

}

This now means that the control can pass properties client side. So, start by adding your properties, i.e.

public virtual string TimeHourFormat {get;set;}
public virtual string TimeFormat {get;set;}

Once you have some properties you need to pass them as script descriptors:

IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors()
{
    ScriptControlDescriptor desc = new ScriptControlDescriptor("Project.MyDateTimePicker", 
        this.ClientID);

    // Properties
    desc.AddProperty("timeHourFormat", this.TimeHourFormat);
    desc.AddProperty("timeFormat", this.TimeFormat);

    yield return desc;
}

IEnumerable<ScriptReference> IScriptControl.GetScriptReferences()
{
    ScriptReference reference = new ScriptReference();
    reference.Assembly = Assembly.GetAssembly(typeof(MyDateTimePicker)).FullName;
    reference.Name = "Project.MyDateTimePicker.js";
    yield return reference;
}

We now have everything we need to implement the client side script, which can contain all the jQuery you want. Pop the following template into MyDateTimePicker.js and away you go!

Type.registerNamespace('Project');

Project.MyDateTimePicker = function (element) {

    this._timeHourFormat = null;
    this._timeFormat = null;

    // Calling the base class constructor
    Project.MyDateTimePicker.initializeBase(this, [element]);

}

Project.MyDateTimePicker.prototype =
{

    initialize: function () {

        // Call the base initialize method
        Project.MyDateTimePicker.callBaseMethod(this, 'initialize');

        $(document).ready(
            // See, jQuery!
        );

    },

    dispose: function () {

        // Call the base class method
        Project.MyDateTimePicker.callBaseMethod(this, 'dispose');

    },


    //////////////////
    // Public Methods 
    ////////////////// 

    // Hides the control from view
    doSomething: function (e) {

    },

    //////////////////
    // Properties 
    //////////////////   

    get_timeHourFormat: function () {
        return this._timeHourFormat;
    },
    set_timeHourFormat: function (value) {
        var e = Function._validateParams(arguments, [{ name: 'value', type: String}]);
        if (e) throw e;
        if (this._timeHourFormat != value) {
            this._timeHourFormat = value;
            this.raisePropertyChanged('timeHourFormat');
        }
    },

    get_timeFormat: function () {
        return this._timeFormat;
    },
    set_timeFormat: function (value) {
        var e = Function._validateParams(arguments, [{ name: 'value', type: String}]);
        if (e) throw e;
        if (this._timeFormat != value) {
            this._timeFormat = value;
            this.raisePropertyChanged('timeFormat');
        }
    }

}


Project.MyDateTimePicker.registerClass('Project.MyDateTimePicker', Sys.UI.Control);

if (typeof(Sys) != 'undefined')
{
    Sys.Application.notifyScriptLoaded();
}