All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
1.1
The page you are viewing does not exist in version 1.1. This link will take you to the root page.

DateEdit Class

An editor that allows users to select dates in a platform-specific date picker.

Namespace: DevExpress.XamarinForms.Editors

Assembly: DevExpress.XamarinForms.Editors.dll

Declaration

public class DateEdit :
    EditBase,
    IDateEditController,
    IEditController,
    IElementController

Remarks

DateEdit displays a date selected in the standard iOS or Android date picker that appears when a user taps the editor.

DateEdit

The editor initially displays a date icon on the right within the box. You can also add the following optional elements:

DateEdit - Elements

  1. Custom Icon
  2. Label
  1. Date Icon
  2. Help Text
  1. Error Message

Date

Use the Date property to set or get the date in the editor. The MinDate and MaxDate properties specify the minimum and maximum allowed dates and limit user input to the specified range.

Use the following properties to change the appearance and alignment of the date in the box:

Property

Description

TextColor / DisabledTextColor

Specify the text color for each state of the editor.

TextFontSize
TextFontFamily
TextFontAttributes

Specify the font settings of a date displayed in the editor.

TextHorizontalAlignment

Gets or sets the horizontal alignment of a date displayed in the editor.

Date Format

The DisplayFormat property defines the format of a date displayed in the editor.

You can use standard or custom format specifiers (see the MSDN topics Standard date and time format strings and Custom date and time format strings) to create format patterns, for example:

<dxe:DateEdit DisplayFormat="d"/>

DateEdit.DisplayFormat

<dxe:DateEdit DisplayFormat=""ddd d MMM""/>

DateEdit.DisplayFormat

Label

The [](xref:DevExpress.XamarinForms.Editors.EditBase.LabelText property specifies the editor's input prompt string. The label is displayed inside the editor while the editor is not focused. When the editor gets focus, the label moves to the top. If a value is assigned to the editor, the label is always displayed at the top.

DateEdit Label

To pin the label to the top of the editor, set the IsLabelFloating property to false.

To customize the label's appearance, use the following properties:

Property

Description

LabelColor / FocusedLabelColor
DisabledLabelColor / ErrorColor

Specify the label's color for each state of the editor.

LabelFontSize
TextFontFamily
TextFontAttributes

Specify the label's font settings.

Placeholder

A placeholder (PlaceholderText) is the input prompt string displayed within the edit box when the editor is empty and focused.

To specify the color of the placeholder text, use the PlaceholderColor property.

Help Text and Error Message

You can display the following labels below an editor:

The BottomTextTopIndent property specifies the indent between the editor's bottom border and the help or error text.

To specify the color and font attributes for the help/error text, use the following properties:

Property

Description

HelpTextColor
DisabledHelpTextColor

Specify the help text color for different states of an editor.

ErrorColor

Specifies the error message text color.

BottomTextFontSize
BottomTextFontFamily
BottomTextFontAttributes

Specify font settings.

If HelpText is not set, ErrorText appears as an additional line below the edit box and page content shifts down. To prevent this behavior, set the ReserveBottomTextLine property to true.

Icons

The date editor can display icons within its box.

  • Date icon - indicates a date editor.
  • Clear icon - removes a date selected in the editor.
  • Error icon - appears in the error state (HasError is true).
  • Custom icons - can be shown on the left or right within the box.

DateEdit - Icons

Use the following members to manage the editor's icons:

Icon

Property

Description

Date Icon

DateIcon

Allows you to replace the default date icon image with a custom icon.

DateIconClicked / DateIconCommand

Allow you to perform an action when a user taps the date icon.

IsDateIconVisible

Specifies whether the date icon is visible.

Clear Icon

ClearIconVisibility

Specifies when the clear icon is displayed.

ClearIcon

Specifies the clear icon image.

ClearIconClicked / ClearIconCommand

Allow you to assign an additional action to the clear icon.

Error Icon

ErrorIcon

Allows you to replace the default error icon image with a custom one.

ErrorIconClicked / ErrorIconCommand

Allow you to perform an action when a user taps the error icon.

IsErrorIconVisible

Specifies whether the error icon is visible.

Custom Icons

StartIcon / EndIcon

Specify custom icons displayed on the left and right within the editor.

StartIconClicked / StartIconCommand
EndIconClicked / EndIconCommand

Allow you to set actions that occur when a user taps custom icons.

IsStartIconVisible / IsEndIconVisible

Specify whether custom icons are visible.

Common

IconColor / DisabledIconColor

Specify icon color for each state of the editor.

IconIndent

Specifies the distance between an icon and input text (or prefix/suffix, if any).

IconSpacing

Specifies the distance between icons.

IconVerticalAlignment

Specifies the vertical alignment of icons.

Editor Appearance

The editor appears as follows depending on the current state and specified BoxMode:

Editor State

BoxMode = Outlined (default)

BoxMode = Filled

Inactive

DateEdit Outlined - Inactive

DateEdit Filled - Inactive

Focused

DateEdit Outlined - Focused

DateEdit Filled - Focused

Activated

DateEdit Outlined - Activated

DateEdit Filled - Activated

Error

DateEdit Outlined - Error

DateEdit Filled - Error

Disabled

DateEdit Outlined - Disabled

DateEdit Filled - Disabled

Use the following properties to change the appearance of the edit box and its borders:

Property

Description

BorderColor
DisabledBorderColor
FocusedBorderColor

Specify the border color for each state of the editor.

ErrorColor

Specifies the color of the edit box borders, label, and error icon and error message if there is an input error.

BorderThickness
DisabledBorderThickness
FocusedBorderThickness

Specify the border thickness for each state of the editor.

CornerMode

Specifies whether edit box corners are rounded or cut.

CornerRadius

Specifies the radius of the edit box corners.

BackgroundColor
DisabledBackgroundColor

Specifies the edit box fill color.

BoxPadding

Specifies the amount of space between edit box borders and content.

Implements

Xamarin.Forms.IAnimatable
Xamarin.Forms.ITabStopElement
Xamarin.Forms.IViewController
Xamarin.Forms.IVisualElementController
Xamarin.Forms.Internals.IGestureController
Xamarin.Forms.IGestureRecognizers
Xamarin.Forms.IElementController

Inheritance

Object
Xamarin.Forms.BindableObject
Xamarin.Forms.Element
Xamarin.Forms.NavigableElement
Xamarin.Forms.VisualElement
View
EditBase
DateEdit
See Also