DurationField

A specialized field allowing a user to also specify duration unit when editing the duration value.

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

Duration field
//<code-header>
fiddle.title = 'Duration field';
//</code-header>
new DurationField({
    appendTo  : targetElement,
    width     : 200,
    label     : 'Duration',
    value     : '15 min',
    step      : '5 min',
    rendition : 'outlined'
});

new DurationField({
    appendTo  : targetElement,
    width     : 200,
    label     : 'Duration',
    value     : '10 d',
    step      : '1 d',
    rendition : 'filled'
});

Configs

119

Common

Comma-separated list of units to allow in this field, e.g. "day,hour,year". Leave blank to allow all valid units (the default)

allowNegative: Boolean

Set to true to allow negative duration

The number of decimal places to allow. Defaults to no constraint.

The duration magnitude to use with the current unit value. Can be either an integer or a float value. Both "," and "." are valid decimal separators.

Max duration value (e.g. 10d)

Minimum duration value (e.g. 1d)

step: DurationConfig | Number | String= 1

Step size for spin button clicks. 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 step's current unit is used (or day if no current step set) and just the magnitude is changed.

If a String is passed, it is parsed by parseDuration, for example '1d', '1 d', '1 day', or '1 day'.

The duration unit to use with the current magnitude value.

Note that setting a value that includes a unit will override the configured unit.

When set to true the field will use short names of unit durations (as returned by getShortNameOfUnit) when creating the input field's display value.

The value may be set either in object form specifying two properties, a numerical magnitude and a string unit:

new DurationField({
   value : {
     magnitude : 1,
     unit      : 'day'
   }
});

Or as a string, that is parsed in accordance with current locale rules. The string is taken to be the numeric magnitude, followed by whitespace, then an abbreviation, or name of the unit:

new DurationField({
   value : '1 day'
});

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

When the passed value includes a unit, that unit will override the unit configured on the field.

Upon read, the value is always a Duration object containing magnitude and unit.

listenersEvents

Other

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.

ParameterTypeDescription
triggers.spinFieldTriggerConfig

Shows up and down arrows to increase or decrease the field value based on the step

triggers.clearFieldTriggerConfig

Clears the field value, only available if this field is clearable

columnWidget
nameField
renditionTextField
rtlRTL
spanWidget

Accessibility

ariaLabelWidget
keyMapKeyMap

Container

inlineField

CSS

clsWidget
colorWidget
htmlClsWidget
styleWidget
uiWidget

DOM

adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
tagWidget
titleWidget

Field

maxLengthTextField
minLengthTextField

Float & align

alignWidget
anchorWidget
centeredWidget
draggableWidget
floatingWidget
xWidget
yWidget

Input element

Label

hintField
labelLabelable
labelClsLabelable
labelPositionLabelable
labelsField
labelWidthLabelable

Layout

alignSelfWidget
dockWidget
flexWidget
heightWidget
hiddenWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget

Misc

badgeBadge
dataFieldWidget
disabledWidget
localeClassLocalizable
localizableLocalizable
maskedWidget
ownerWidget
refWidget
rippleWidget
tabWidget
tooltipWidget

Scrolling

Properties

92

Common

Get/set the allowed units, e.g. "day,hour,year".

The duration magnitude to use with the current unit value. Can be either an integer or a float value. Both "," and "." are valid decimal separators.

Get/set the max value

Get/set the min value (e.g. 1d)

The duration unit to use with the current magnitude value.

Note that setting a value that includes a unit will override the configured unit.

The value may be set either in object form specifying two properties, a numerical magnitude and a string unit:

new DurationField({
   value : {
     magnitude : 1,
     unit      : 'day'
   }
});

Or as a string, that is parsed in accordance with current locale rules. The string is taken to be the numeric magnitude, followed by whitespace, then an abbreviation, or name of the unit:

new DurationField({
   value : '1 day'
});

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

When the passed value includes a unit, that unit will override the unit configured on the field.

Upon read, the value is always a Duration object containing magnitude and unit.

Class hierarchy

isDurationField: Boolean= truereadonly
Identifies an object as an instance of DurationField class, or subclass thereof.
isDurationField: Boolean= truereadonlystatic
Identifies an object as an instance of DurationField class, or subclass thereof.
isBadgeBadge
isDelayableDelayable
isEventsEvents
isFieldField
isFormulaFieldFormulaField
isKeyMapKeyMap
isLabelableLabelable
isLocalizableLocalizable
isTextFieldTextField
isValidatableValidatable
isWidgetWidget

Other

milliseconds: Numberreadonly

The milliseconds property is a read-only property which returns the number of milliseconds in this field's value

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.

ParameterTypeDescription
triggers.spinFieldTriggerConfig

Shows up and down arrows to increase or decrease the field value based on the step

triggers.clearFieldTriggerConfig

Clears the field value, only available if this field is clearable

$namestaticWidget
columnWidget
formulaFormulaField
inputField
isEmptyField
isValidField
renditionTextField
rtlRTL
spanWidget
typestaticWidget

Accessibility

keyMapKeyMap

CSS

clsWidget

DOM

appendToWidget
contentWidget
datasetWidget
elementWidget
htmlWidget
idWidget
styleWidget

Float & align

xWidget
yWidget

Layout

alignSelfWidget
flexWidget
heightWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
widthWidget

Lifecycle

configBase

Misc

badgeBadge
cellInfoWidget
disabledWidget
errorTipValidatable
labelLabelable
localeHelperLocalizable
localeManagerLocalizable
refWidget
tabWidget
tooltipWidget

Visibility

hiddenWidget
isVisibleWidget

Widget hierarchy

ownerWidget
parentWidget

Functions

64

Configuration

applyDefaultsstaticBase

Events

Float & align

alignToWidget
setXYWidget
showByWidget
toFrontWidget

Lifecycle

createstaticWidget
destroystaticBase
initClassstaticWidget

Misc

attachTooltipstaticWidget
fromElementstaticWidget
fromSelectorstaticWidget
getByIdstaticWidget
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable

Other

clearField
clearErrorValidatable
composeWidget
createOnFrameDelayable
disableWidget
enableWidget
focusWidget
getErrorsValidatable
LstaticLocalizable
maskWidget
onEvents
recomposeWidget
relayAllEvents
selectField
setErrorValidatable
triggerEvents
unEvents
unmaskWidget

Visibility

hideWidget
showWidget

Widget hierarchy

closestWidget
containsWidget
ownsWidget
queryWidget
queryAllWidget
upWidget

Events

19

User performed the default action (typed into this field or hit the triggers).

// Adding a listener using the "on" method
durationField.on('action', ({ value, oldValue, valid, event, userAction, source }) => {

});
ParameterTypeDescription
valueDuration

This field's value

oldValueDuration

This field's previous value

validBoolean

True if this field is in a valid state.

eventEvent

The triggering DOM event if any.

userActionBoolean

Triggered by user taking an action (true) or by setting a value (false)

sourceDurationField

This field

Fired when this field's value changes.

// Adding a listener using the "on" method
durationField.on('change', ({ value, oldValue, valid, event, userAction, source }) => {

});
ParameterTypeDescription
valueDuration

This field's value

oldValueDuration

This field's previous value

validBoolean

True if this field is in a valid state.

eventEvent

The triggering DOM event if any.

userActionBoolean

Triggered by user taking an action (true) or by setting a value (false)

sourceDurationField

This field

catchAllEvents
clearField
destroyEvents
focusInWidget
focusOutWidget
hideWidget
inputField
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
showWidget
triggerField

Event handlers

19

User performed the default action (typed into this field or hit the triggers).

new DurationField({
    onAction({ value, oldValue, valid, event, userAction, source }) {

    }
});
ParameterTypeDescription
valueDuration

This field's value

oldValueDuration

This field's previous value

validBoolean

True if this field is in a valid state.

eventEvent

The triggering DOM event if any.

userActionBoolean

Triggered by user taking an action (true) or by setting a value (false)

sourceDurationField

This field

Called when this field's value changes.

new DurationField({
    onChange({ value, oldValue, valid, event, userAction, source }) {

    }
});
ParameterTypeDescription
valueDuration

This field's value

oldValueDuration

This field's previous value

validBoolean

True if this field is in a valid state.

eventEvent

The triggering DOM event if any.

userActionBoolean

Triggered by user taking an action (true) or by setting a value (false)

sourceDurationField

This field

onClearField
onDestroyEvents
onFocusInWidget
onHideWidget
onInputField
onPaintWidget
onResizeWidget
onShowWidget

Typedefs

7

CSS variables

124