DatePicker¶

Date Picker allows users to select date or time entries. Users can use this control to specify a date, a time of day, or a combination of both.

When assigning a rule to a property of DatePicker, the rule will be passed an instance of the following proxy class as an argument:

• DatePickerFormCellProxy

DatePicker Properties¶

Caption¶

The key name of the property.

• 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¶

Disable or enable interaction.

• type: boolean
• default: true

IsVisible¶

Sets the visibility of the control.

• type: boolean
• default: true

Mode¶

Date picker mode for date picker.

• type: enum
• default: "Datetime"

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

Mode Known Values¶

OnValueChange¶

Action or rule to perform after value changed.

• type: ActionOrRule
• Formatter and Binding are not supported

RequiredIndicator¶

Specifies whether a field is mandatory by displaying a visual indicator. This property accepts either a Boolean (true / false) or a single character (e.g., '!') as its value.

By default, the indicator is a red asterisk (*) displayed at the end of the field's caption. You can customize the indicator character by setting this property. Additionally, the appearance (e.g., color or size) can be styled through metadata as well.

Note:

• This indicator is purely visual—it does not enforce that the user must fill out the field.
• If more than one character is defined, the system will revert to using the default indicator.

• type: BooleanOrString
• default: false

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.

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

RequiredIndicator¶

The string value is a style class name of RequiredIndicator.

• RequiredIndicatorColor style class

Validation¶

The validation view properties.

• type: Validation

Value¶

Selected value of the Date and Time.

• type: string

_Name¶

• type: string

_Type¶

• type: const

The value of this property must be:

"Control.Type.FormCell.DatePicker"

validationProperties¶

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

• type: ValidationProperties

Examples¶

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.DatePicker",
        "_Name": "Date Picker",
        "Caption": "End Date",
        "Mode": "Date",
        "Value": "2017-02-02T12:00:00Z",
        "IsEditable": false,
        "HelperText": "This is helper text",
        "Validation": {
          "Message": "This is validation view message",
          "Visible": true,
          "SeparatorVisible": true,
          "Styles": {
            "Message": "ValidationMessage",
            "ValidationView": "ValidationView"
          }
        },
        "RequiredIndicator": true,
        "Styles": {
          "Background": "DatePickerFormCellBackground",
          "Caption": "DatePickerFormCellCaption",
          "Value": "DatePickerFormCellValue",
          "RequiredIndicator": "RequiredIndicatorColor"
        }
      }]
    }]
  }]
}

Style Classes Definition¶

/* DatePicker Form Cell - Background */
.DatePickerFormCellBackground {
  background-color: yellow;
}

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

/* DatePicker Form Cell - Value */
.DatePickerFormCellValue {
  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;
}

/* Required indicator's color - font-color / color can be used */
.RequiredIndicatorColor {
  font-color: blue;
}