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.
//<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
Configs
119Common
Comma-separated list of units to allow in this field, e.g. "day,hour,year". Leave blank to allow all valid units (the default)
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 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.
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.
| Parameter | Type | Description |
|---|---|---|
triggers.spin | FieldTriggerConfig | Shows up and down arrows to increase or decrease the field value based on the step |
triggers.clear | FieldTriggerConfig | Clears the field value, only available if this field is clearable |
DOM
Float & align
Input element
Label
Layout
Misc
Scrolling
Properties
92
Properties
92Common
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
Other
The milliseconds property is a read-only property which returns the number of milliseconds in this field's
value
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.spin | FieldTriggerConfig | Shows up and down arrows to increase or decrease the field value based on the step |
triggers.clear | FieldTriggerConfig | Clears the field value, only available if this field is clearable |
CSS
DOM
Layout
Misc
Functions
64
Functions
64Configuration
Events
Misc
Other
Widget hierarchy
Events
19
Events
19User 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 }) => {
});| Parameter | Type | Description |
|---|---|---|
value | Duration | This field's value |
oldValue | Duration | This field's previous value |
valid | Boolean | True if this field is in a valid state. |
event | Event | The triggering DOM event if any. |
userAction | Boolean | Triggered by user taking an action ( |
source | DurationField | 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 }) => {
});| Parameter | Type | Description |
|---|---|---|
value | Duration | This field's value |
oldValue | Duration | This field's previous value |
valid | Boolean | True if this field is in a valid state. |
event | Event | The triggering DOM event if any. |
userAction | Boolean | Triggered by user taking an action ( |
source | DurationField | This field |
Event handlers
19
Event handlers
19User performed the default action (typed into this field or hit the triggers).
new DurationField({
onAction({ value, oldValue, valid, event, userAction, source }) {
}
});| Parameter | Type | Description |
|---|---|---|
value | Duration | This field's value |
oldValue | Duration | This field's previous value |
valid | Boolean | True if this field is in a valid state. |
event | Event | The triggering DOM event if any. |
userAction | Boolean | Triggered by user taking an action ( |
source | DurationField | This field |
Called when this field's value changes.
new DurationField({
onChange({ value, oldValue, valid, event, userAction, source }) {
}
});| Parameter | Type | Description |
|---|---|---|
value | Duration | This field's value |
oldValue | Duration | This field's previous value |
valid | Boolean | True if this field is in a valid state. |
event | Event | The triggering DOM event if any. |
userAction | Boolean | Triggered by user taking an action ( |
source | DurationField | This field |