React Date Box - Overview (2024)

TS JS

Backend API

import React, { useCallback, useMemo, useState } from 'react';import DateBox, { DateBoxTypes } from 'devextreme-react/date-box';import service from './data.ts';const dateTimeLabel = { 'aria-label': 'Date Time' };const dateLabel = { 'aria-label': 'Date' };const timeLabel = { 'aria-label': 'Time' };const disabledLabel = { 'aria-label': 'Disabled' };const pickerLabel = { 'aria-label': 'Picker' };const clearLabel = { 'aria-label': 'Clear' };const customFormatLabel = { 'aria-label': 'Custom Format' };const birthDateLabel = { 'aria-label': 'Birth Date' };function App() { const [value, setValue] = useState(new Date(1981, 3, 27)); const now = new Date(); const firstWorkDay2017 = new Date(2017, 0, 3); const min = new Date(1900, 0, 1); const dateClear = new Date(2015, 11, 1, 6); const disabledDates = service.getFederalHolidays(); const diffInDay = useMemo( () => `${Math.floor( Math.abs((new Date().getTime() - value.getTime()) / (24 * 60 * 60 * 1000)), )} days`, [value], ); const onValueChanged = useCallback((e: DateBoxTypes.ValueChangedEvent) => { setValue(e.value); }, []); return ( <div> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">Date</div> <div className="dx-field-value"> <DateBox defaultValue={now} inputAttr={dateLabel} type="date" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Time</div> <div className="dx-field-value"> <DateBox defaultValue={now} inputAttr={timeLabel} type="time" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Date and time</div> <div className="dx-field-value"> <DateBox defaultValue={now} inputAttr={dateTimeLabel} type="datetime" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Custom format</div> <div className="dx-field-value"> <DateBox defaultValue={now} inputAttr={customFormatLabel} 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={now} inputAttr={pickerLabel} pickerType="rollers" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Clear button</div> <div className="dx-field-value"> <DateBox defaultValue={dateClear} type="time" inputAttr={clearLabel} showClearButton={true} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Disabled</div> <div className="dx-field-value"> <DateBox defaultValue={now} type="datetime" inputAttr={disabledLabel} disabled={true} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Disable certain dates</div> <div className="dx-field-value"> <DateBox defaultValue={firstWorkDay2017} type="date" pickerType="calendar" inputAttr={disabledLabel} disabledDates={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={value} min={min} max={now} inputAttr={birthDateLabel} onValueChanged={onValueChanged} /> </div> </div> <div className="dx-field"> <div className="dx-field-value"> Your age is <div id="age">{diffInDay}</div> </div> </div> </div> </div> );}export default App;

import React, { useCallback, useMemo, useState } from 'react';import DateBox from 'devextreme-react/date-box';import service from './data.js';const dateTimeLabel = { 'aria-label': 'Date Time' };const dateLabel = { 'aria-label': 'Date' };const timeLabel = { 'aria-label': 'Time' };const disabledLabel = { 'aria-label': 'Disabled' };const pickerLabel = { 'aria-label': 'Picker' };const clearLabel = { 'aria-label': 'Clear' };const customFormatLabel = { 'aria-label': 'Custom Format' };const birthDateLabel = { 'aria-label': 'Birth Date' };function App() { const [value, setValue] = useState(new Date(1981, 3, 27)); const now = new Date(); const firstWorkDay2017 = new Date(2017, 0, 3); const min = new Date(1900, 0, 1); const dateClear = new Date(2015, 11, 1, 6); const disabledDates = service.getFederalHolidays(); const diffInDay = useMemo( () => `${Math.floor( Math.abs((new Date().getTime() - value.getTime()) / (24 * 60 * 60 * 1000)), )} days`, [value], ); const onValueChanged = useCallback((e) => { setValue(e.value); }, []); return ( <div> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">Date</div> <div className="dx-field-value"> <DateBox defaultValue={now} inputAttr={dateLabel} type="date" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Time</div> <div className="dx-field-value"> <DateBox defaultValue={now} inputAttr={timeLabel} type="time" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Date and time</div> <div className="dx-field-value"> <DateBox defaultValue={now} inputAttr={dateTimeLabel} type="datetime" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Custom format</div> <div className="dx-field-value"> <DateBox defaultValue={now} inputAttr={customFormatLabel} 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={now} inputAttr={pickerLabel} pickerType="rollers" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Clear button</div> <div className="dx-field-value"> <DateBox defaultValue={dateClear} type="time" inputAttr={clearLabel} showClearButton={true} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Disabled</div> <div className="dx-field-value"> <DateBox defaultValue={now} type="datetime" inputAttr={disabledLabel} disabled={true} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Disable certain dates</div> <div className="dx-field-value"> <DateBox defaultValue={firstWorkDay2017} type="date" pickerType="calendar" inputAttr={disabledLabel} disabledDates={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={value} min={min} max={now} inputAttr={birthDateLabel} onValueChanged={onValueChanged} /> </div> </div> <div className="dx-field"> <div className="dx-field-value"> Your age is <div id="age">{diffInDay}</div> </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'));

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; },};

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>

#age { display: inline-block;}