TimeField

The time field widget is a text input field with a time picker drop down. It shows left/right arrows to increase or decrease time by the step value.

This field can be used as an editor for the Column. It is used as the default editor for the TimeColumn.

Configuring forward / backward step size

The step configuration controls how the time value changes when using the forward and backward buttons at the start and end of the field. The step value is also used to configure the appropriate picker:

For steps in minutes (e.g. '5m'), the minute picker will use this step value
For steps in hours (e.g. '2h'), the hour picker will use this step value

new TimeField({
    label     : 'Time field',
    appendTo  : document.body,
    step      : '5 minutes'  // Controls both field buttons and minute picker
});

This widget may be operated using the keyboard. ArrowDown opens the time picker, which itself is keyboard navigable. Shift+ArrowDown activates the step back trigger. Shift+ArrowUp activates the step forwards trigger.

let field = new TimeField({
  format: 'HH'
});

Salesforce users will not see this form of the TimeField and picker because this uses custom elements which are not supported in Salesforce. Instead, the last released version of the 6.0.0 TimePicker is used. The public API is not changed.

Time field

//<code-header>
fiddle.title = 'Time field';
//</code-header>
new TimeField({
    labelPosition : 'above',
    label         : 'Not editable',
    editable      : false,
    style         : 'margin-right: .5em',
    appendTo      : targetElement
});

new TimeField({
    labelPosition : 'above',
    label         : 'Editable',
    editable      : true,
    appendTo      : targetElement,
    value         : new Date(2024, 0, 1),
    step          : '5 minutes'
});

Configs

120

Common

editablePickerField

listenersEvents

Other

format: String= LTAlso a property

Format for date displayed in field (see Core.helper.DateHelper#function-format-static for formatting options).

keepDate: Boolean= trueAlso a property

Set to true to not clean up the date part of the passed value. Set to false to reset the date part to January 1st

max: String | DateAlso a property

Max time value

min: String | DateAlso a property

Min time value

partner: String | DateFieldAlso a property

A reference to a partner DateField which this TimeField should sync its value with. When the DateField's value is changed, this TimeField's value is updated to match. When this TimeField's value is changed, the DateField's value is updated to match.

When a string is passed, this is taken to be the widget's reference property and the actual DateField is looked up in the same owner container as this TimeField. If the reference cannot be found there, the string is used as a widget id.

step: String | Number | DurationConfigAlso a property

Time increment duration value. Defaults to 5 minutes. The value is taken to be a string consisting of the numeric magnitude and the units. The units may be a recognised unit abbreviation of this locale or the full local unit name. For example "10m" or "5min" or "2 hours"

stepTriggers: Boolean= true

Set to false to hide the forward and backward time step triggers.

triggers: Object<String, Widget>Also a property

Widgets that trigger functionality upon click. Each trigger icon is a Widget instance which may be hidden, shown and observed and styled just like any other widget.

Parameter	Type	Description
`triggers.expand`	FieldTriggerConfig	Expands the picker to select a time
`triggers.back`	FieldTriggerConfig	Subtracts the step from the current time
`triggers.forward`	FieldTriggerConfig	Adds the step to the current time
`triggers.clear`	FieldTriggerConfig	Clears the field value, only available if this field is clearable

value: String | DateAlso a property

Value, which can be a Date or a string. If a string is specified, it will be converted using the specified format.

When converted to a Date, the date part is set to January 1st of the year 2020.

autoSelectField

callOnFunctionsWidget

catchEventHandlerExceptionsEvents

clearableField

columnWidget

detectCSSCompatibilityIssuesWidget

highlightExternalChangeField

keyStrokeChangeDelayField

nameField

placeholderField

readOnlyField

renditionTextField

requiredField

revertOnEscapeField

rtlRTL

showRequiredIndicatorField

skipValidationField

spanWidget

Accessibility

ariaDescriptionWidget

ariaLabelWidget

keyMapKeyMap

Container

containerField

containValuesField

inlineField

CSS

clsWidget

colorWidget

contentElementClsWidget

htmlClsWidget

styleWidget

uiWidget

DOM

adoptWidget

appendToWidget

contentWidget

datasetWidget

htmlWidget

idWidget

insertBeforeWidget

insertFirstWidget

tagWidget

titleWidget

Field

maxLengthTextField

minLengthTextField

Float & align

alignWidget

anchorWidget

centeredWidget

constrainToWidget

draggableWidget

floatingWidget

hideAnimationWidget

maximizeOnMobileWidget

positionedWidget

scrollActionWidget

showAnimationWidget

xWidget

yWidget

Input element

autoCompleteField

inputAlignField

inputAttributesField

inputTagField

inputTypeField

inputWidthField

spellCheckField

tabIndexField

validateOnInputField

Label

hintField

hintHtmlField

labelLabelable

labelClsLabelable

labelPositionLabelable

labelsField

labelWidthLabelable

Layout

alignSelfWidget

dockWidget

flexWidget

heightWidget

hiddenWidget

marginWidget

maxHeightWidget

maxWidthWidget

minHeightWidget

minWidthWidget

textAlignWidget

weightWidget

widthWidget

Misc

badgeBadge

bubbleEventsEvents

dataFieldWidget

defaultBindPropertyWidget

disabledWidget

elementAttributesWidget

ignoreParentReadOnlyWidget

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

maskDefaultsWidget

maskedWidget

monitorResizeWidget

ownerWidget

preventTooltipOnTouchWidget

refWidget

rippleWidget

rootElementWidget

showTooltipWhenDisabledWidget

tabWidget

tooltipWidget

Picker

autoExpandPickerField

pickerPickerField

pickerAlignElementPickerField

Scrolling

scrollableWidget

Properties

Class hierarchy

isTimeField: Boolean= truereadonly

Identifies an object as an instance of TimeField class, or subclass thereof.

isTimeField: Boolean= truereadonlystatic

Identifies an object as an instance of TimeField class, or subclass thereof.

isBadgeBadge

isDelayableDelayable

isEventsEvents

isFieldField

isFormulaFieldFormulaField

isKeyMapKeyMap

isLabelableLabelable

isLocalizableLocalizable

isPickerFieldPickerField

isRTLRTL

isTextFieldTextField

isValidatableValidatable

isWidgetWidget

Other

format: StringAlso a config

Get/Set format for time displayed in field (see format for formatting options).

keepDate: Boolean= trueAlso a config

Set to true to not clean up the date part of the passed value. Set to false to reset the date part to January 1st

max: DateAlso a config

Get/set max value, which can be a Date or a string. If a string is specified, it will be converted using the specified format.

min: DateAlso a config

Get/set min value, which can be a Date or a string. If a string is specified, it will be converted using the specified format.

partner: String | DateFieldAlso a config

step: DurationConfigAlso a config

The step property may be set in Object form specifying two properties, magnitude, a Number, and unit, a String.

If a Number is passed, the steps's current unit is used and just the magnitude is changed.

If a String is passed, it is parsed by parseDuration, for example '5m', '5 m', '5 min', '5 minutes'.

Upon read, the value is always returned in object form containing magnitude and unit.

triggers: Object<String, Widget>Also a config

Widgets that trigger functionality upon click. Each trigger icon is a Widget instance which may be hidden, shown and observed and styled just like any other widget.

Parameter	Type	Description
`triggers.expand`	FieldTriggerConfig	Expands the picker to select a time
`triggers.back`	FieldTriggerConfig	Subtracts the step from the current time
`triggers.forward`	FieldTriggerConfig	Adds the step to the current time
`triggers.clear`	FieldTriggerConfig	Clears the field value, only available if this field is clearable