DateEdit Class

An editor that displays a date in a specific format. Users can select a date within a cross-platform customizable date picker.

Namespace : DevExpress.XamarinForms.Editors

Assembly : DevExpress.XamarinForms.Editors.dll

NuGet Package : DevExpress.XamarinForms.Editors

Declaration

csharp

public class DateEdit :
    EditBase,
    IDateEditController,
    IEditController,
    IElementController

Remarks

The DateEdit allows users to enter a date. The image below illustrates an account form that allows a user to enter a birth date.

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

Custom Icon 2. Label 3. Date Icon 4. Help Text 5. 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 DateChangedCommand and DateChangedCommandParameter properties to specify a command executed when the date changes. You can also handle the DateChanged event to respond to date changes.

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:

XAML

xaml

<dxe:DateEdit DisplayFormat="d"/>

XAML

xaml

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

Date Picker

A date picker appears when a user taps the editor. The default date picker is the same on iOS and Android, which ensures a consistent look and feel for your app on both platforms.

To invoke the picker in code, use the IsPickerShown property.

Appearance Customization

You can customize the appearance of the following visual elements in the calendar: days, months, years, days of the week, and header. You can set a custom style for all such visual elements, as well as for specific days/months/years. A style allows you to specify background and foreground colors, and fonts. You can also replace the default data template used to render a visual element.

Day View
Month View
Year View
Calendar Header
Day of Week
Day
Trailing Day
Month
Year

The table below contains options that you can use to apply custom styles and templates to visual elements.

Style for All Elements	Style for Specific Elements	Template	Description
PickerDayCellStyle	PickerCustomDayCellStyle	PickerDayCellTemplate	Allow you to customize days.
PickerDayOfWeekCellStyle	PickerCustomDayOfWeekCellStyle	PickerDayOfWeekCellTemplate	Allow you to customize days of the week.
PickerMonthCellStyle	PickerCustomMonthCellStyle	PickerMonthCellTemplate	Allow you to customize months.
PickerYearCellStyle	PickerCustomYearCellStyle	PickerYearCellTemplate	Allow you to customize years.
PickerHeaderStyle	—	—	Allow you to customize the calendar’s header.

To obtain or set the view in code, use the PickerActiveViewType property. You can also use the following options to specify the display of the calendar:

Property	Description
PickerCellMinSize	Gets or sets the minimum size of cells in the default picker.
PickerFirstDayOfWeek	Gets or sets the first day of the week in the default picker.
PickerHorizontalCellSpacing	Gets or sets the horizontal spacing between cells in the default picker.
PickerVerticalCellSpacing	Gets or sets the vertical spacing between cells in the default picker.
PickerShowTrailingDays	Gets or sets whether days related to the previous and next months are displayed in the default picker.

Example 1

The example below show how to apply custom appearance settings to days, days of week, and the calendar’s header.

XAML

xml

<dxe:DateEdit>
    <dxe:DateEdit.HeaderStyle>
        <dxe:CalendarHeaderStyle TextColor="#F44848"/>
    </dxe:DateEdit.HeaderStyle>
    <dxe:DateEdit.DayCellStyle>
        <dxe:CalendarDayCellStyle FontAttributes="Bold,Italic"
                                  TextColor="Black"/>
    </dxe:DateEdit.DayCellStyle>
    <dxe:DateEdit.DayOfWeekCellStyle>
        <dxe:CalendarDayOfWeekCellStyle FontAttributes="Bold,Italic"
                                        TextColor="Black"/>
    </dxe:DateEdit.DayOfWeekCellStyle>
</dxe:DateEdit>

Example 2

The example below shows how to apply a custom style to a specific day.

C#
XAML

using DevExpress.XamarinForms.Editors;

void CustomDayCellStyle(object sender, CustomSelectableCellStyleEventArgs e) {
    if(e.Date.Month == 2 && e.Date.Day == 14) {
        e.FontAttributes = FontAttributes.Bold;
        e.EllipseBackgroundColor = Color.FromRgba(e.TextColor.R, e.TextColor.G, e.TextColor.B, 0.15);
    }

    if(e.Date.Month == 2 && e.Date.Day == 21) {
        e.FontAttributes = FontAttributes.Bold;
        Color textColor = Color.FromHex("F44848");
        e.EllipseBackgroundColor = Color.FromRgba(textColor.R, textColor.G, textColor.B, 0.25);
        e.TextColor = textColor;
    }   
}

xml

<dxe:DateEdit PickerCustomDayCellStyle="CustomDayCellStyle"/>

Example 3

The example below shows how to apply a custom style to weekends (days in the calendar and days of the week).

C#
XAML

using DevExpress.XamarinForms.Editors;

void CustomDayCellStyle(object sender, CustomSelectableCellStyleEventArgs e) {
    if (e.Date.DayOfWeek == DayOfWeek.Saturday || e.Date.DayOfWeek == DayOfWeek.Sunday) {
        e.TextColor = Color.FromHex("F44848");
        if(e.IsTrailing)
            e.TextColor = Color.FromRgba(e.TextColor.R, e.TextColor.G, e.TextColor.B, 0.5);
    }
}

private void CustomDayOfWeekCellStyle(object sender, CustomDayOfWeekCellStyleEventArgs e) {
    if(e.DayOfWeek == DayOfWeek.Saturday || e.DayOfWeek == DayOfWeek.Sunday)
        e.TextColor = Color.FromHex("F44848");
}

xml

<dxe:DateEdit PickerCustomDayCellStyle="CustomDayCellStyle"
              PickerCustomDayOfWeekCellStyle="CustomDayOfWeekCellStyle"/>

Native Picker

The editor can also use a native picker, which varies depending on the platform. Enable the UseNativePicker option to display the platform-specific picker.

Note

Customization options described above are only in effect for the default picker.

Label

The 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.

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:

HelpText - A brief editor description.
ErrorText - A message shown when an error occurs (HasError is true ).

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.

Autofill

If the editor’s AutofillContentType property is set to AndroidBirthDate or AndroidCreditCardExpirationDate, the user can automatically fill the editor with an appropriate date. Note that the device should have an enabled autofill service that contains the required values (names, dates, passwords, and so on).