TimeField
Widget

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.

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

format : StringLT

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

Has a corresponding runtime format property.
keepDate : Booleantrue

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

Has a corresponding runtime keepDate property.
max : String/Date

Max time value

Has a corresponding runtime max property.
min : String/Date

Min time value

Has a corresponding runtime min property.
partner : String/DateField

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.

Has a corresponding runtime partner property.
step : String/Number/DurationConfig

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"

Has a corresponding runtime step property.
stepTriggers : Booleantrue

Set to false to hide the forward and backward time step triggers.
triggers : Object<String, FieldTriggerConfig>
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.
- expand : FieldTriggerConfig
  
  Expands the picker to select a time
- back : FieldTriggerConfig
  
  Subtracts the step from the current time
- forward : FieldTriggerConfig
  
  Adds the step to the current time
- clear : FieldTriggerConfig
  
  Clears the field value, only available if this field is clearable
Has a corresponding runtime triggers property.
value : String/Date

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.

Has a corresponding runtime value property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isTimeField : Booleantrue

READONLY

static

ADVANCED

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

format : String

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

Has a corresponding format config.
keepDate : Booleantrue

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

Has a corresponding keepDate config.
max : String/Date

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.

Has a corresponding max config.
min : String/Date

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.

Has a corresponding min config.
partner : String/DateField

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.

Has a corresponding partner config.
step : String/Number/DurationConfig

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.

Has a corresponding step config.
triggers : Object<String, FieldTriggerConfig>
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.
- expand : FieldTriggerConfig
  
  Expands the picker to select a time
- back : FieldTriggerConfig
  
  Subtracts the step from the current time
- forward : FieldTriggerConfig
  
  Adds the step to the current time
- clear : FieldTriggerConfig
  
  Clears the field value, only available if this field is clearable
Has a corresponding triggers config.
value : String/Date

Get/set value, which can be a Date or a string. If a string is specified, it will be converted using the specified format.
This value is a Date object. As such it contains the date part. When set using a string, the date part is set to January 1st of the year 2020.

Has a corresponding value config.
isTimeField : Booleantrue

READONLY

ADVANCED

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

Functions

Functions are methods available for calling on the class

showPicker( )

Show picker

type: timefield

Source path

Core/widget/TimeField.js

TimeField
Widget

Configuring forward / backward step size

Configs

Properties

Functions

Source path

Inheritance tree6

Mixins9

Contents

TimeField Widget

Configuring forward / backward step size

Configs

Properties

Functions

Source path

Inheritance tree6

Mixins9

Contents

TimeField
Widget