Date Box - Formatting

Use the displayFormat property to change how DateBox displays date values.

Backend API

<div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Locale-dependent format</div> <div class="dx-field-value"> @(Html.DevExtreme().DateBox() .InputAttr("aria-label", "Date Time") .Placeholder("12/31/2018, 2:52 PM") .Type(DateBoxType.DateTime) .ShowClearButton(true) .UseMaskBehavior(true) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Built-in predefined format</div> <div class="dx-field-value"> @(Html.DevExtreme().DateBox() .InputAttr("aria-label", "Date") .Placeholder("10/16/2018") .ShowClearButton(true) .UseMaskBehavior(true) .DisplayFormat("shortdate") .Type(DateBoxType.Date) .Value(new DateTime(2018, 10, 16, 15, 8, 12)) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Locale Data Markup Language (LDML) pattern</div> <div class="dx-field-value"> @(Html.DevExtreme().DateBox() .InputAttr("aria-label", "Date") .Placeholder("Tuesday, 16 of Oct, 2018 14:52") .ShowClearButton(true) .UseMaskBehavior(true) .DisplayFormat("EEEE, d of MMM, yyyy HH:mm") .Value(new DateTime(2018, 10, 16, 15, 8, 12)) .Type(DateBoxType.DateTime) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Format with literal characters</div> <div class="dx-field-value"> @(Html.DevExtreme().DateBox() .InputAttr("aria-label", "Date") .Placeholder("Year: 2018") .ShowClearButton(true) .UseMaskBehavior(true) .DisplayFormat("'Year': yyyy") .Type(DateBoxType.Date) .Value(new DateTime(2018, 10, 16, 15, 8, 12)) ) </div> </div> </div>

using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class DateBoxController : Controller { public ActionResult Formatting() { return View(); } } }

.dx-fieldset { min-height: 500px; }

This demo illustrates the following:

Locale-dependent format The DateBox formats values based upon a user's locale. This is the default format. As such, you do not need to define the displayFormat property. Refer to the following help topic for more information: Localize Dates, Numbers, and Currencies
Built-in predefined formats DevExtreme supports various predefined formats. You can use simple strings or shortcuts that define commonly used date formats instead of complex expressions. Review the linked document for a list of values you can assign to displayFormat. This demo uses the "shortdate" format.
LDML pattern Use an LDML pattern to construct a custom date-time format string. This demo sets displayFormat property to "EEEE, d of MMM, yyyy HH:mm". This expression displays week day, day number, month, year, hour, and minute. The editor displays the formatted value. Refer to the following help topic for information about supported format characters: Custom Format String.
Format with literal characters Specify the displayFormat property as a string that contains literal and LDML characters. Wrap any characters that are not part of the LDML pattern in quotation marks - otherwise, they may be interpreted as wildcards. In this example, if you remove quotation marks from the word "Year", the letter "a" is interpreted as an "AM/PM" placeholder.

You can also use an input mask in the DateBox. Input masks ensure that input values match the displayFormat (set the useMaskBehavior value to true).

For additional formatting-related information, please refer to the following help topic: Value Formatting.