Use the displayFormat property to change how DateBox displays date values.
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.
<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 System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class DateBoxController : Controller {
public ActionResult Formatting() {
return View();
}
}
}.dx-fieldset {
min-height: 500px;
}