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 Optional
FormatRule Rule Optional ""
IsEditable boolean Optional true
IsVisible boolean Optional true
Mode enum Required "DateTime"
OnValueChange ActionOrRule Optional
Styles object Optional
Value string Optional
_Name string Required
_Type const Required
validationProperties ValidationProperties Optional

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

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 equal to one of the known values below.

Mode Known Values

Value Description
Date
Datetime
Time

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.


Value

Selected value of the Date and Time.

  • type: string

_Name

  • type: string

_Type

  • type: const

The value of this property must be equal to:

"Control.Type.FormCell.DatePicker"

validationProperties

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,
        "validationProperties": {
          "ValidationMessage": "Validation Message",
          "ValidationMessageColor": "ff0000",
          "SeparatorBackgroundColor": "000000",
          "SeparatorIsHidden": false,
          "ValidationViewBackgroundColor": "fffa00",
          "ValidationViewIsHidden": false
        },
        "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: UIFontTextStyleBody;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}

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