Your search did not match any results.
Date Box

Overview

Documentation

The DateBox is a widget that displays the date and time in one of DevExtreme predefined formats or a format defined in an external localization library, or a type in the required date/time value. In this demo, the «Custom format» DateBox’es value is formatted using the Globalize library. Alternatively, you can use Intl.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import { DateBox } from 'devextreme-react'; import service from './data.js'; class App extends React.Component { constructor(props) { super(props); this.state = { value: new Date(1981, 3, 27) }; this.now = new Date(); this.firstWorkDay2017 = new Date(2017, 0, 3); this.min = new Date(1900, 0, 1); this.dateClear = new Date(2015, 11, 1, 6); this.disabledDates = service.getFederalHolidays(); this.onValueChanged = this.onValueChanged.bind(this); } get diffInDay() { return `${Math.floor(Math.abs(((new Date()).getTime() - this.state.value.getTime()) / (24 * 60 * 60 * 1000))) } days`; } onValueChanged(e) { this.setState({ value: e.value }); } render() { return ( <div> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">Date</div> <div className="dx-field-value"> <DateBox defaultValue={this.now} type="date" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Time</div> <div className="dx-field-value"> <DateBox defaultValue={this.now} type="time" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Date and time</div> <div className="dx-field-value"> <DateBox defaultValue={this.now} type="datetime" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Custom format</div> <div className="dx-field-value"> <DateBox defaultValue={this.now} displayFormat="EEEE, MMM dd" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Date picker</div> <div className="dx-field-value"> <DateBox defaultValue={this.now} pickerType="rollers" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Clear button</div> <div className="dx-field-value"> <DateBox defaultValue={this.dateClear} type="time" showClearButton={true} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Disabled</div> <div className="dx-field-value"> <DateBox defaultValue={this.now} type="datetime" disabled={true} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Disable certain dates</div> <div className="dx-field-value"> <DateBox defaultValue={this.firstWorkDay2017} type="date" pickerType="calendar" disabledDates={this.disabledDates} /> </div> </div> </div> <div className="dx-fieldset"> <div className="dx-fieldset-header">Event Handling</div> <div className="dx-field"> <div className="dx-field-label">Set Birthday</div> <div className="dx-field-value"> <DateBox applyValueMode="useButtons" value={this.state.value} min={this.min} max={this.now} onValueChanged={this.onValueChanged} /> </div> </div> <div className="dx-field"> <div className="dx-field-value"> Your age is <div id="age">{this.diffInDay}</div> </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="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/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.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#age { display: inline-block; }
const federalHolidays = [ new Date(2017, 0, 1), new Date(2017, 0, 2), new Date(2017, 0, 16), new Date(2017, 1, 20), new Date(2017, 4, 29), new Date(2017, 6, 4), new Date(2017, 8, 4), new Date(2017, 9, 9), new Date(2017, 10, 11), new Date(2017, 10, 23), new Date(2017, 11, 25) ]; export default { getFederalHolidays() { return federalHolidays; } };
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, 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', 'devextreme': 'npm:devextreme@19.2', 'devextreme-react': 'npm:devextreme-react@19.2', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devexpress-gantt': 'npm:devexpress-gantt', // 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' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });