How to use the built-in eWorld UI library time picker

Process Design Form Designer
1

You can use the eWorld Calendar Library Time Picker control, which is included in the WorkflowGen WebForms application binaries, to add a time picker to a form. It is simple to use since the tool is automatically localized to support the user’s language preference and does not require any additional configuration. (Alternately, you can use a calendar from a JavaScript API that supports localization by modifying the references in the web form.)

This example will add a button to open a basic time picker next to a field in short time format with the ID REQUEST_TIME1.

Add the following code to the form’s .NET code:

protected void Page_Load(object sender, EventArgs e)
{
        base.Page_Load(sender, e);

        Control parent = REQUEST_TIME1.Parent;
        TimePicker tp = new TimePicker();
        tp.ID = "tp1";

        // eWorld.UI.DisplayType enum contains: Button | Image | LabelButton | LabelImage | TextBoxButton | TextBoxImage
        // Button or Image is recommended, with the "OnClientChange" instruction below.
        // For display only (not supported by Workflow), LabelButton and LabelImage can be used)
        tp.ControlDisplay = eWorld.UI.DisplayType.Button;

        // Tell the timepicker which control to update. tp1_hidden contains the selected value (_hidden is the generated suffix)
        tp.OnClientChange = "document.forms['form1']['REQUEST_TIME1'].value = document.forms['form1']['tp1_hidden'].value;" ;

        // Add at the correct position in your form.
        if(parent != null)
        {
            parent.Controls.AddAt(parent.Controls.IndexOf(REQUEST_TIME1) + 1, tp);
        }
}