Skip to content

DurationPicker

Duration Picker allows the users to specify a duration by selecting a start time and an end time.

DurationPicker Properties

Property Type Required Default
Caption string Required
FormatRule Rule Optional ""
IsEditable boolean Optional true
IsVisible boolean Optional true
MinuteInterval integer Optional 5
OnValueChange ActionOrRule Optional
Styles object Optional
Unit enum Required
Value number Optional
_Name string Required
_Type const Required
validationProperties ValidationProperties Optional

Caption

Displays label on the control.

  • type: string

FormatRule

If specified, the given rule executes when control is initialized or value changes.

  • type: Rule
  • default: ""

IsEditable

Disables or enables interaction.

  • type: boolean
  • default: true

IsVisible

Sets the visibility of the control.

  • type: boolean
  • default: true

MinuteInterval

Interval in minutes in picker. Max is 30.

  • type: integer
  • default: 5

OnValueChange

Action or rule to perform after value changed.


Styles

Set styles for Background, Caption and Value.

  • type: object with following properties.
Property Type Required Default
Background string Optional
Value string Optional
Caption string Optional

Background

The string value is a style class name for Background.

Value

The string value is a style class name for Value.

Caption

The string value is a style class name for Caption.


Unit

Unit of duration. It can be hour or minute.

  • type: enum

The value of this property must be equal to one of the known values below.

Unit Known Values

Value Description
M
MIN
H
HOUR

Value

Duration value in hours or minutes depending on the unit.

  • type: number

_Name

  • type: string

_Type

  • type: const

The value of this property must be equal to:

"Control.Type.FormCell.DurationPicker"

validationProperties

The validation view properties.


Examples

Literal

Duration control with unit in hour

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.DurationPicker",
        "_Name": "DurationControl",
        "Caption": "Duration1",
        "Value": 3.3,
        "Unit": "H",
        "MinuteInterval": 1,
        "IsEditable": true
      }]
    }]
  }]
}

Duration control with unit in Minutes

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.DurationPicker",
        "_Name": "DurationControl",
        "Caption": "Duration2",
        "Value": 70,
        "Unit": "M",
        "MinuteInterval": 1,
        "IsEditable": true
      }]
    }]
  }]
}

Binding

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.DurationPicker",
        "_Name": "DurationControl",
        "Caption": "Duration1",
        "Value": "{Duration}",
        "Unit": "{DurationUOM}",
        "MinuteInterval": 1,
        "IsEditable": true
      }]
    }]
  }]
}

Validation

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.DurationPicker",
        "_Name": "DurationControl",
        "Caption": "Duration1",
        "Value": 3.3,
        "Unit": "H",
        "MinuteInterval": 1,
        "IsEditable": true,
        "validationProperties": {
          "ValidationMessage": "Validation Message",
          "ValidationMessageColor": "ff0000",
          "SeparatorBackgroundColor": "000000",
          "SeparatorIsHidden": false,
          "ValidationViewBackgroundColor": "fffa00",
          "ValidationViewIsHidden": false
        },
        "Styles": {
          "Background": "DurationPickerFormCellBackground",
          "Caption": "DurationPickerFormCellCaption",
          "Value": "DurationPickerFormCellValue"
        }
      }]
    }]
  }]
}

Style Classes Definition

/* DurationPicker Form Cell - Background */
.DurationPickerFormCellBackground {
  background-color: yellow;
}

/* DurationPicker Form Cell - Caption */
.DurationPickerFormCellCaption {
  background-color: #0000FF;
  color: black;
  font-style: UIFontTextStyleBody;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}

/* DurationPicker Form Cell - Value */
.DurationPickerFormCellValue {
  background-color: #0000FF;
  color: black;
  font-style: UIFontTextStyleBody;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}