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

**URL:** <https://discuss.workflowgen.com/t/how-to-use-the-built-in-eworld-ui-library-time-picker/297>\
**Category:** Form Designer\
**Created:** [May 20, 2016, 3:25am UTC](https://discuss.workflowgen.com/t/how-to-use-the-built-in-eworld-ui-library-time-picker/297 "2016-05-20T03:25:14Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![wfg-admin](https://yyz2.discourse-cdn.com/flex030/user_avatar/discuss.workflowgen.com/wfg-admin/32/714_2.png) [@wfg-admin](https://discuss.workflowgen.com/u/wfg-admin)\
**Post date:** [May 20, 2016, 3:25am UTC](https://discuss.workflowgen.com/t/how-to-use-the-built-in-eworld-ui-library-time-picker/297/1 "2016-05-20T03:25:14Z")

</div>

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:

```auto
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);
        }
}

```