DurationField
Widget

A text field for editing Duration values, allowing the user to enter both a numeric magnitude and a time unit (e.g. '2d', '4 hours'). The field parses user input into a Duration object and displays the value using configurable unit abbreviations. Use spin triggers to increment/decrement the value by the configured step. Restrict allowed units with allowedUnits and enforce bounds with min and max. This field can be used as a cell editor in a Grid and is the default editor for DurationColumn.

const durationField = new DurationField({
    label : 'Task duration',
    value : '3 days',
    min   : '1d',
    max   : '30d',
    appendTo : document.body
});

Useful configs and properties

Config	Description
value	Duration value as string, number, object, or Duration
unit	Default duration unit (`'day'`, `'hour'`, etc.)
min	Minimum allowed duration (e.g. `'1d'`)
max	Maximum allowed duration (e.g. `'10d'`)
step	Step size for spin button clicks
allowedUnits	Comma-separated list of permitted units
useAbbreviation	Use short unit names (e.g. `'d'` instead of `'day'`)
allowNegative	Allow negative duration values

Configs

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

allowNegative : Boolean

Set to true to allow negative duration
allowedUnits : String

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

Has a corresponding runtime allowedUnits property.
decimalPrecision : Number

The number of decimal places to allow. Defaults to no constraint.
magnitude : Number

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.

Has a corresponding runtime magnitude property.
max : String

Max duration value (e.g. 10d)

Has a corresponding runtime max property.
min : String

Minimum duration value (e.g. 1d)

Has a corresponding runtime min property.
step : DurationConfig/Number/String1

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'.
unit : DurationUnit

The duration unit to use with the current magnitude value.

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

Has a corresponding runtime unit property.
useAbbreviation : Boolean

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.
value : String/Number/DurationConfig/Duration
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.

Has a corresponding runtime value property.
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.
- spin : FieldTriggerConfig
  
  Shows up and down arrows to increase or decrease the field value based on the step
- clear : FieldTriggerConfig
  
  Clears the field value, only available if this field is clearable
Has a corresponding runtime triggers property.

Properties

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

isDurationField : Booleantrue

READONLY

static

ADVANCED

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

allowedUnits : String

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

Has a corresponding allowedUnits config.
magnitude : Number

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.

Has a corresponding magnitude config.
max : String

Get/set the max value

Has a corresponding max config.
min : String

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

Has a corresponding min config.
unit : DurationUnit

The duration unit to use with the current magnitude value.

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

Has a corresponding unit config.
value : String/Number/DurationConfig/Duration
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.

Has a corresponding value config.
milliseconds : Number

READONLY

The milliseconds property is a read-only property which returns the number of milliseconds in this field's value
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.
- spin : FieldTriggerConfig
  
  Shows up and down arrows to increase or decrease the field value based on the step
- clear : FieldTriggerConfig
  
  Clears the field value, only available if this field is clearable
Has a corresponding triggers config.
isDurationField : Booleantrue

READONLY

ADVANCED

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

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

action

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

Fired when this field's value changes.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onAction

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

Called when this field's value changes.

DurationField
Widget

Useful configs and properties

See also

Configs

Properties

Events

Event handlers

Source path

Inheritance tree5

Mixins9

Contents

DurationField Widget

Useful configs and properties

See also

Configs

Properties

Events

Event handlers

Source path

Inheritance tree5

Mixins9

Contents

DurationField
Widget