Formatting
Use our DateRangeBox displayFormat property to change date display format as requirements dictate. This demo illustrates the following:
-
Locale-dependent format
DateRangeBox formats date range values based upon the specified locale. You do not need to define a format with the displayFormat property. For more information, refer to the following help topic: Localize Dates, Numbers, and Currencies. -
Built-in predefined formats
DevExtreme allows you to apply various predefined formats. You can specify simple strings or shortcuts that define widely used date formats instead of complex expressions. This demo illustrates how to display dates using the "shortdate" format. -
Locale Data Markup Language (LDML) pattern To define a custom date format string, use the LDML pattern. In this demo, the displayFormat property is set to "EEEE, d of MMM, yyyy". This expression displays week day, day number, month and year. The input field displays the formatted value. For additional information on supported format characters, refer to the following help topic: Custom Format String.
-
Add literal characters
You can specify the displayFormat property as a string with literal and Locale Data Markup Language characters. You should wrap characters that are not part of the LDML pattern within quotation marks - otherwise, they may be interpreted as wildcards. In this demo, if you specify the word "Year" without quotation marks, the letter "a" is interpreted as an "AM/PM" placeholder.
To ensure that input values match displayFormat, you can apply an input mask to our DateRangeBox (set the control’s useMaskBehavior property to true).
For additional formatting-related information, please refer to the following help topic: Value Formatting.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
import React from 'react';
import DateRangeBox from 'devextreme-react/date-range-box';
const msInDay = 1000 * 60 * 60 * 24;
const now = new Date();
const startDate = new Date(now.getTime() - msInDay * 3);
const endDate = new Date(now.getTime() + msInDay * 3);
const commonSettings = {
showClearButton: true,
useMaskBehavior: true,
openOnFieldClick: false,
};
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">
<DateRangeBox
startDatePlaceholder="12/31/2018"
endDatePlaceholder="12/31/2018"
{...commonSettings}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Built-in predefined format</div>
<div className="dx-field-value">
<DateRangeBox
displayFormat="shortdate"
defaultStartDate={startDate}
defaultEndDate={endDate}
{...commonSettings}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Locale Data Markup Language (LDML) pattern</div>
<div className="dx-field-value">
<DateRangeBox
displayFormat="EEEE, d of MMM, yyyy"
defaultStartDate={startDate}
defaultEndDate={endDate}
{...commonSettings}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Format with literal characters</div>
<div className="dx-field-value">
<DateRangeBox
displayFormat="'Year': yyyy, 'Month': MMM, 'Day': d"
defaultStartDate={startDate}
defaultEndDate={endDate}
{...commonSettings}
/>
</div>
</div>
</div>
</div>
);
}
export default App;
import React from 'react';
import DateRangeBox from 'devextreme-react/date-range-box';
const msInDay = 1000 * 60 * 60 * 24;
const now = new Date();
const startDate = new Date(now.getTime() - msInDay * 3);
const endDate = new Date(now.getTime() + msInDay * 3);
const commonSettings = {
showClearButton: true,
useMaskBehavior: true,
openOnFieldClick: false,
};
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">
<DateRangeBox
startDatePlaceholder="12/31/2018"
endDatePlaceholder="12/31/2018"
{...commonSettings}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Built-in predefined format</div>
<div className="dx-field-value">
<DateRangeBox
displayFormat="shortdate"
defaultStartDate={startDate}
defaultEndDate={endDate}
{...commonSettings}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Locale Data Markup Language (LDML) pattern</div>
<div className="dx-field-value">
<DateRangeBox
displayFormat="EEEE, d of MMM, yyyy"
defaultStartDate={startDate}
defaultEndDate={endDate}
{...commonSettings}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Format with literal characters</div>
<div className="dx-field-value">
<DateRangeBox
displayFormat="'Year': yyyy, 'Month': MMM, 'Day': d"
defaultStartDate={startDate}
defaultEndDate={endDate}
{...commonSettings}
/>
</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@23.2.5/cjs',
'devextreme-react': 'npm:devextreme-react@23.2.5/cjs',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.51/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'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.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: '',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/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>
<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/23.2.5/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>
.demo-container {
height: 610px;
}
.dx-fieldset {
min-height: 500px;
}
.dx-field {
padding: 8px;
}