Your search did not match any results.
Date Box



This demo shows how to use a locale-dependent format (or default format), built-in format, LDML pattern, and a format with literal characters to specify the displayFormat. Note that when the useMaskBehavior option is set to true, the DateBox formats the display value and also controls user input.

Copy to CodeSandBox
import React from 'react'; import DateBox from 'devextreme-react/date-box'; const date = new Date(2018, 9, 16, 15, 8, 12); class App extends React.Component { render() { 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} 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} useMaskBehavior={true} type="date" displayFormat="shortdate" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">LDML pattern</div> <div className="dx-field-value"> <DateBox defaultValue={date} placeholder="Tuesday, 16 of Oct, 2018 14:52" showClearButton={true} useMaskBehavior={true} 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} 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.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="" /> <link rel="stylesheet" type="text/css" href="" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src=""></script> <script src=""></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
.dx-fieldset { min-height: 500px; }
System.config({ transpiler: 'plugin-babel', meta: { }, paths: { 'npm:': '' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'globalize': 'npm:globalize/dist/globalize', 'json': 'npm:systemjs-plugin-json/json.js', 'cldr': 'npm:cldrjs/dist/cldr', 'devextreme': 'npm:devextreme@20.1', 'devextreme-react': 'npm:devextreme-react@20.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram@1.0.17', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.10', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, }, babelOptions: { sourceMaps: false, stage0: true, react: true } });