ASP.Net Shell Management for jQuery datetime picker

Question

I am looking to create a wrapper control for a jQuery time date control that will be used on the 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 also sets the following properties for customization.

• TimeHourFormat: "12" or "24" (12 (AM / PM) or 24 hours)
• TimeAMPMCondense: True (if the 12-hour format displays AM / PM with only 1 letter and no space, i.e. 1: 00A or 5: 05P)
• TimeFormat: "HH / MM" (leading zeros by hours and minutes. By default, always have leading zeros.)
• CssClass: "calendarClass" (CSS class name / style sheet for formatting)
• ReadOnly: True (set the text field to read-only mode and disable the pop-up calendar. If false, enable the pop-up calendar and enable access to the text window).
• DateFormat: "MM / DD / YYYY" (standard Pass C # formatting that also includes YY no century formats. By default, there are always leading zeros and a century.)
• Display: "C" (transition C to display only the calendar, CT to display calendar and time, and T to display only time)
• Placement: Pop-up (the default for a pop-up of a control can also be embedded)
• DateEarly: "01/01/1900" (if the date is equal to or less, then displays and returns null (empty))
• WeekStart: "" ( )
• : "/image/calendar.ico" ( , , . , '.)

JQuery Date Time Picker Implementation. . Demo .

. .

.

Answer 1

, , jQuery ? , IScriptControl.

, :

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

MyDateTimePicker.js , :

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

, MyDateTimePicker.cs :

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

}

, ScriptControl, :

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);

}

, . , , ..

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

, script:

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;
}

script, jQuery. MyDateTimePicker.js !

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();
}