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`	Yes
FormatRule	Rule	No	`""`
HelperText	`string`	No
IsEditable	`boolean`	No	`true`
IsVisible	`boolean`	No	`true`
MinuteInterval	`integer`	No	`5`
OnValueChange	ActionOrRule	No
Separator	`boolean`	No	`true`
Styles	`object`	No
Unit	`enum`	Yes
Validation	Validation	No
Value	`number`	No
_Name	`string`	Yes
_Type	`const`	Yes
validationProperties	ValidationProperties	No

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¶

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¶

Picker interval in minutes. The initial state of DurationPicker MinuteInterval is 1 min, 0 min and 00 min for iOS, Android and web respectively.

type: integer
default: 5
maximum value: 30

OnValueChange¶

Action or rule to perform after value changed.

type: ActionOrRule
Formatter and Binding are not supported

Separator¶

Sets the visibility of the separator line below the control. This property will take precedence over ControlSeparator in section and is only supported for Form Cell control in Sectioned Table and not supported in Form Cell Container.

type: boolean
default: true

Styles¶

Set styles for Background, Caption and Value.

type: object with following properties.

Property	Type	Required
Background	string	No
Value	string	No
Caption	string	No

Background¶

The string value is a style class name of Background.

Background style class

Value¶

The string value is a style class name of Value.

Value style class

Caption¶

The string value is a style class name of Caption.

Caption style class

Unit¶

Unit of duration. It can be hour or minute.

type: enum

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

Value	Description
`M`	Minute
`Min`	Minute
`H`	Hour
`Hour`	Hour

Validation¶

The validation view properties.

type: Validation

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:

"Control.Type.FormCell.DurationPicker"

validationProperties¶

Deprecated. Please use Validation property. The validation view properties.

type: ValidationProperties

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,
        "Validation": {
          "Message": "This is validation view message",
          "Visible": true,
          "SeparatorVisible": true,
          "Styles": {
            "Message": "ValidationMessage",
            "ValidationView": "ValidationView"
          }
        },
        "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: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}

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

/* Validation view */
.ValidationView {
  background-color: #83AF9B;
  border-top-color: #ff00ee;
}

/* Validation message */
.ValidationMessage {
  font-size: 16;
  font-color: #0000ff;
}