If you have technical questions, please create a support ticket in the DevExpress Support Center.
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;
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
This demo illustrates the following DateBox properties:
-
value
A value the DateBox displays. -
type
Specifies whether the DateBox allows users to select one of the following types:-
"date"
Users can select the date from the calendar, or they can type in their own date value (in the required format). -
"time"
Users can select a time from a range between 12:00 AM and 11:30 PM at 30-minute intervals, or they can type in their own time value (in the required format). Specify the interval property to set the time interval. -
"datetime"
Users can select the date from the calendar and the time from the spin and dropdown editors. They can also choose the Today button.
-
-
displayFormat
A date/time display format. You can use one of the predefined formats or specify a custom format. This demo illustrates the latter. -
pickerType
Specifies the type of UI used to select a date or time. This demo shows how to change a calendar to a roller date picker. -
showClearButton
Specifies whether to display the button that clears the DateBox value. -
disabled
Specifies whether the DateBox responds to user interaction. -
disabledDates
Dates that are not available for selection. -
applyValueMode
Defines whether the selected value applies instantly or after a user clicks the Apply button.
To get started with the DevExtreme DateBox component, refer to the following tutorial for step-by-step instructions: Getting Started with DateBox.