React DateRangeBox - Getting Started
DateRangeBox is a UI component that allows users to enter or pick two dates (a date range).
This tutorial shows how to configure basic DateRangeBox features.
Each section in this tutorial describes a single configuration step. You can also find the full code in the GitHub repository.
Create the DateRangeBox
Use the following code to create a basic DateRangeBox:
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { DateRangeBox } from 'devextreme-react/date-range-box';
- export default function App() {
- return (
- <DateRangeBox ...
- // Configuration goes here
- />
- );
- }
Run this code. You will see a DateRangeBox component that allows users to enter or pick two dates (a date range). The next step configures date range constraints.
Set the Accepted Date Range
You can define constraints for date ranges that can be selected by end users. Specify the min and max properties.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { DateRangeBox } from 'devextreme-react/date-range-box';
- const now = new Date();
- const minDate = new Date().setDate(now.getDate()-14); // 2 weeks before the current date
- const maxDate = new Date().setDate(now.getDate()+14); // 2 weeks after the current date
- export default function App() {
- return (
- <DateRangeBox ...
- min={minDate}
- max={maxDate}
- />
- );
- }
Run the code. You can now select dates only within the predefined range: from two weeks before the current date to two weeks after. The next step specifies the date range selected at startup.
Set the Initial Date Range Values
To specify a date range selected at startup, use the startDate and endDate properties. You can also assign an array with start and end dates to the value property. The following code sets the range to a week that starts on the current date.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { DateRangeBox } from 'devextreme-react/date-range-box';
- const startDate = new Date();
- const endDate = new Date().setDate(new Date().getDate()+7);
- export default function App() {
- return (
- <DateRangeBox ...
- startDate={startDate}
- endDate={endDate}
- />
- );
- }
The next step specifies labels for the start date and end date input fields.
Add Labels
If you want to define start date and end date labels, use startDateLabel and endDateLabel properties. To enable floating labels, assign "floating" to the labelMode property. In this mode, labels first appear as value placeholders. When editors obtain focus, labels move up and stay above their input fields.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { DateRangeBox } from 'devextreme-react/date-range-box';
- export default function App() {
- return (
- <DateRangeBox ...
- startDateLabel="Start"
- endDateLabel="End"
- labelMode="floating"
- />
- );
- }
The next step handles the value change event.
Handle the Value Change Event
To respond to a date range change, handle the onValueChanged event. In this tutorial, the callback function logs the previous and current date ranges.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { DateRangeBox } from 'devextreme-react/date-range-box';
- const onValueChanged = (e) => {
- console.log(e.value);
- console.log(e.previousValue);
- }
- export default function App() {
- return (
- <DateRangeBox ...
- onValueChanged={onValueChanged}
- />
- );
- }
You have now completed DateRangeBox basic configuration. For additional information on this UI component, see the following link:
If you have technical questions, please create a support ticket in the DevExpress Support Center.