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 | "" |
HelperText | string |
Optional | |
IsEditable | boolean |
Optional | true |
IsVisible | boolean |
Optional | true |
Mode | enum |
Required | "Datetime" |
OnValueChange | ActionOrRule | Optional | |
Separator | boolean |
Optional | true |
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:
""
HelperText¶
iOS and Web only. 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 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.
- 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 | Default |
---|---|---|---|
Background | string |
Optional | |
Value | string |
Optional | |
Caption | string |
Optional |
Background¶
The string value is a style class name for Background
.
- Background style class
Value¶
The string value is a style class name for Value
.
- Value style class
Caption¶
The string value is a style class name for Caption
.
- Caption style class
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.
- 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",
"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: 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;
}