Skip to content

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.

DatePicker Properties

Property Type Required Default
Caption string No
FormatRule Rule No ""
HelperText string No
IsEditable boolean No true
IsVisible boolean No true
Mode enum Yes "Datetime"
OnValueChange ActionOrRule No
Separator boolean No true
Styles object No
Validation Validation No
Value string No
_Name string Yes
_Type const Yes
validationProperties ValidationProperties No

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

Value Description
Date
Datetime
Time

OnValueChange

Action or rule to perform after value changed.

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 Default
Background string No
Value string No
Caption string No

Background

The string value is a style class name of Background.

Value

The string value is a style class name of Value.

Caption

The string value is a style class name of Caption.

Validation

The validation view properties.

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.

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"
          }
        },
        "Styles": {
          "Background": "DatePickerFormCellBackground",
          "Caption": "DatePickerFormCellCaption",
          "Value": "DatePickerFormCellValue"
        }
      }]
    }]
  }]
}

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