DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Formatting

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

Backend API
import React from 'react'; import DateBox from 'devextreme-react/date-box'; const date = new Date(2018, 9, 16, 15, 8, 12); const dataTimeLabel = { 'aria-label': 'Date Time' }; const dateLabel = { 'aria-label': 'Date' }; function App() { return ( <div> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">Locale-dependent format</div> <div className="dx-field-value"> <DateBox type="datetime" placeholder="12/31/2018, 2:52 PM" showClearButton={true} inputAttr={dataTimeLabel} useMaskBehavior={true} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Built-in predefined format</div> <div className="dx-field-value"> <DateBox defaultValue={date} placeholder="10/16/2018" showClearButton={true} inputAttr={dateLabel} useMaskBehavior={true} type="date" displayFormat="shortdate" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Locale Data Markup Language (LDML) pattern</div> <div className="dx-field-value"> <DateBox defaultValue={date} placeholder="Tuesday, 16 of Oct, 2018 14:52" showClearButton={true} inputAttr={dateLabel} useMaskBehavior={true} type="datetime" displayFormat="EEEE, d of MMM, yyyy HH:mm" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Format with literal characters</div> <div className="dx-field-value"> <DateBox defaultValue={date} placeholder="Year: 2018" showClearButton={true} useMaskBehavior={true} inputAttr={dateLabel} type="date" displayFormat={"'Year': yyyy"} /> </div> </div> </div> </div> ); } export default App;
import React from 'react'; import DateBox from 'devextreme-react/date-box'; const date = new Date(2018, 9, 16, 15, 8, 12); const dataTimeLabel = { 'aria-label': 'Date Time' }; const dateLabel = { 'aria-label': 'Date' }; function App() { return ( <div> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">Locale-dependent format</div> <div className="dx-field-value"> <DateBox type="datetime" placeholder="12/31/2018, 2:52 PM" showClearButton={true} inputAttr={dataTimeLabel} useMaskBehavior={true} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Built-in predefined format</div> <div className="dx-field-value"> <DateBox defaultValue={date} placeholder="10/16/2018" showClearButton={true} inputAttr={dateLabel} useMaskBehavior={true} type="date" displayFormat="shortdate" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Locale Data Markup Language (LDML) pattern</div> <div className="dx-field-value"> <DateBox defaultValue={date} placeholder="Tuesday, 16 of Oct, 2018 14:52" showClearButton={true} inputAttr={dateLabel} useMaskBehavior={true} type="datetime" displayFormat="EEEE, d of MMM, yyyy HH:mm" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Format with literal characters</div> <div className="dx-field-value"> <DateBox defaultValue={date} placeholder="Year: 2018" showClearButton={true} useMaskBehavior={true} inputAttr={dateLabel} type="date" displayFormat={"'Year': yyyy"} /> </div> </div> </div> </div> ); } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render(<App />, document.getElementById('app'));
window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.4/cjs', 'devextreme-react': 'npm:devextreme-react@24.1.4/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.10/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: 'json', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.4/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
.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.