Your search did not match any results.
Date Box

Formatting

To change how a DateBox displays dates, use the displayFormat property. This demo illustrates the following examples:

  • Locale-dependent format
    The DateBox formats its value according to the user's locale. This is the default format and 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" - a combination of the day of the week, 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 can 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 the input value matches the displayFormat. To do this, set the useMaskBehavior value to true.

For more information about value formatting, refer to the Value Formatting article.

Copy to CodeSandBox
Apply
Reset
<div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Locale-dependent format</div> <div class="dx-field-value"> <dx-date-box placeholder="12/31/2018, 2:52 PM" type="datetime" [showClearButton]="true" [useMaskBehavior]="true"> </dx-date-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">Built-in predefined format</div> <div class="dx-field-value"> <dx-date-box placeholder="10/16/2018" [showClearButton]="true" [useMaskBehavior]="true" displayFormat="shortdate" type="date" [value]="date"> </dx-date-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">LDML pattern</div> <div class="dx-field-value"> <dx-date-box placeholder="Tuesday, 16 of Oct, 2018 14:52" [showClearButton]="true" [useMaskBehavior]="true" displayFormat="EEEE, d of MMM, yyyy HH:mm" [value]="date"> </dx-date-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">Format with literal characters</div> <div class="dx-field-value"> <dx-date-box placeholder="Year: 2018" [showClearButton]="true" [useMaskBehavior]="true" displayFormat="'Year': yyyy" type="date" [value]="date"> </dx-date-box> </div> </div> </div>
import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxDateBoxModule } from 'devextreme-angular'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent { date: Date = new Date(2018, 9, 16, 15, 8, 12); } @NgModule({ imports: [ BrowserModule, DxDateBoxModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep .dx-fieldset { min-height: 500px; }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ System.config({ transpiler: 'ts', typescriptOptions: { module: "system", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" }, 'devextreme/localization.js': { "esModule": true } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.5.3/lib/typescript.js', '@angular': 'npm:@angular', 'tslib': 'npm:tslib@2.2.0/tslib.js', 'rxjs': 'npm:rxjs@6.4.0', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.26.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.7', 'jszip': 'npm:jszip@3.6.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.10.3/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.23', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.29', 'devextreme-angular': 'npm:devextreme-angular@20.2.6', 'preact': 'npm:preact@10.5.13/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.13/hooks/dist/hooks.js' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, packageConfigPaths: [ "npm:@angular/*/package.json", "npm:@angular/common/*/package.json", "npm:rxjs/package.json", "npm:rxjs/operators/package.json", "npm:devextreme-angular/*/package.json", "npm:devextreme-angular/ui/*/package.json", "npm:devextreme-angular/package.json", "npm:devexpress-diagram/package.json", "npm:devexpress-gantt/package.json", ] });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.7/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.7/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.10.2/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>