_activeComponentId = 'demoTimePicker';

TimePicker

Pick a time via a text input with a clock pop-up, a text input with an inline clock, a plain text input or a standalone clock, in 12- or 24-hour format.

Try it

Component demos show every property used in the settings panel, even at default values, so you can see exactly what's being configured. Bindary's data binding updates the component live when a setting changes; that mechanism isn't covered here, see Bindary for how it works.

Usage

<cui-time-picker id="timePicker" ui-view-mode="0" ui-is-24-hour-clock="true"></cui-time-picker>

const timePicker = $UI.createComponent(componyx.UI.TimePicker, {
    id: 'timePicker',
    viewMode: componyx.UI.TimePicker.ViewModeOption.INPUT_CLOCK_POPUP,
    is24HourClock: true,
    containerElement: document.body
});
timePicker.show();

viewMode accepts the numeric componyx.UI.TimePicker.ViewModeOption enum: 0 InputClockPopup, 1 InputClock, 2 Input, 3 Clock.

What's next

See the TimePicker API reference for the complete list of properties, events and methods.

View and edit mode

Search & Select

Autocomplete Tags

context attribute

value attribute

html attribute

bind attribute

type attribute

attributes attribute

repeat attribute

repeat-item-id attribute

item-id attribute

filter attribute

view-formatter attribute

data-formatter attribute

else-if attribute

else attribute

has-value attribute

includable attribute

include attribute

load attribute

observe attribute

Component Introduction

pre-render attribute

post-render attribute

update-id attribute

keep attribute

view attribute

Node.js Backend

Appskin Appskinevents

Appskin Menuitem

Base Static Item

Base Static Itemlist

Base Webcomponent

Bindary_modules

Bookmarkspy Bookmarkspyevents

Button Buttonevents

Carousel Carouselevents

Colorbutton Colorbuttonevents

Colorpicker Colorpickerevents

Combobox Comboboxevents

Datapager Datapagerevents

Datepicker Datepickerevents

Dialog Dialogevents

Editor Editorevents

Editor Styleitem

Editor_modules Componyx Ui Editor_modules Symbolpicker

Fileupload Fileuploadevents

Form Buildblock

Form Componentsettings

Form Contentfield

Form Datasource

Form Fieldoption

Form Formevents

Form Serverendpoint

Form Spacerfield

Form Validationsettings

Grid Columngroup

Grid Gridevents

Maskedtextbox Maskedtextboxevents

Menu Menuevents

Numericbox Numericboxevents

Panelbar Panelbarevents

Piechart Piechart Segment

Piechart Piechartevents

Piechart Segment

Slider Sliderevents

Tabstrip Tabstripevents

Tabstrip_modules

Timepicker Timepickerevents

Tooltipmanager Trigger

Validator Validatorevents

ClientActivityMonitor

DataContainer<T>

DataContainer<T>

DataContainer<T>

DataResponse<T>

DataResponse<T>

DataResponse<T>

DataUpdateManager

ReusableAttribute

AppSkinAuthenticationMiddleware

AppSkinAuthenticationOptions

AppSkinAuthenticationRequest

AppSkinAuthenticationResponse

AppSkinAuthenticationResponse AuthenticationStateOption

AppSkinAuthenticationResponse FailureReasonOption

AppSkinMenuItem

AppSkinMenuItem MenuSectionOption

AppSkinMenuItem TileSizeOption

AppSkinSearchMiddleware

AppSkinSearchOptions

Base AjaxResult<T>

Base Attributes

Base ItemList<T>

Base NameValuePair

ComboBoxAjaxResult

FilteredColumn FilterOption

GridColumnFilter

Json LenientEnumConverter

Json Utility DefaultSerializer

KeywordIndexData

MenuItem ColumnDirectionOption

MenuItem ExpandDirectionOption

MenuItem TypeOption

ResourceMiddleware

TabStripItem DecorationOption

TagHelpers RegisterTagHelper

TagHelpers RegisterTagHelper ThemeOption

Base JsonDataSettings

Base JsonDataSettings DefaultSerializer

Base LogicRelation<T>

DAL FluentQuery<T>

DAL SqlColumnOrdinalOption

DAL SqlDelimitedIdentifierOption

DAL SqlLimitOption

DAL SqlTopLimitOption

DataAnnotations ForeignKeyAttribute

DataAnnotations ReadOnlyAttribute

DataAnnotations TableAliasAttribute

CaseInsensitiveDictionary<T>

CaseInsensitiveSortedDictionary<T>

Json IJsonSerializer

Json SystemTextJsonSerializer

PluginLoader<T>

Clientactivitymonitor

Dataupdatemanager

License Agreement