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 ""
HelperText string 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: ""

HelperText

iOS and Web only. Helper text to be displayed if there is no validation view.

  • type: string

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,
        "HelperText": "This is helper text"
      }]
    }]
  }]
}

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;
}