All docs
V18.2
20.2
The page you are viewing does not exist in version 20.2. This link will take you to the root page.
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.
18.2
18.1
17.2

Overview - DateEdit

  • 2 minutes to read

DateEdit combines the functionality of a single-line text editor, button editor and dropdown calendar. The editor's dropdown displays a single-month calendar that allows end-users to select dates, and navigate through months and years. Specifying a date (by selecting it on the calendar or by manually typing it into the text box) changes the editor's edit value.

To learn more about DateEdit and see it in action, refer to our online demos.

Implementation Details

DateEdit is realized by the DateEditExtension class. Its instance can be accessed via the ExtensionsFactory.DateEdit helper method, which is used to add a DateEdit extension to a view. This method's parameter provides access to the DateEdit's settings implemented by the DateEditSettings class, allowing you to fully customize the extension.

DateEdit's client counterpart is represented by the MVCxClientDateEdit object.

Declaration

DateEdit can be added to a view in the following manner.

View code (ASPX):

<% 
    Html.DevExpress().DateEdit(
        settings => {
            settings.Name = "dateEdit1";

            settings.Properties.DisplayFormatString = "D";
            settings.Date = new DateTime(1984, 06, 14);
        }
    )
    .Render();
%>

View code (Razor):

@Html.DevExpress().DateEdit(
    settings => {
        settings.Name = "dateEdit1";

        settings.Properties.DisplayFormatString = "D";
        settings.Date = new DateTime(1984, 06, 14);
    }).GetHtml()
NOTE

The Partial View should contain only the extension's code.

The code result is demonstrated in the image below.

dateedit-declaration.png

See Also