Overview

The DateRangeBox component allows users to select a date range with ease. The component includes input boxes for start/end dates and a drop-down date picker. This demo illustrates how to apply the following DateRangeBox settings:

value An array where you can specify the selected range (start/end dates). The DateRangeBox also allows you to define start/end dates separately. For this purpose, use the startDate and endDate properties instead.
displayFormat Date display format. You can use one of our predefined formats or specify a custom format as needs dictate. This demo illustrates the latter.
disabled
Specifies whether the DateRangeBox responds to user interaction.
showClearButton Displays a button that clears DateRangeBox values.
multiView Switches between our single-month and two-month dropdown calendar.
applyValueMode
Defines whether the selected value is applied instantly or after a user clicks the Apply button.

To get started with the DevExtreme DateRangeBox component, refer to the Getting Started with DateRangeBox tutorial.

Prev Demo

Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

TS JS

Backend API

import React, { useCallback, useState } from 'react'; import DateRangeBox from 'devextreme-react/date-range-box'; const msInDay = 1000 * 60 * 60 * 24; const now = new Date(); const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate(); const initialValue: [Date, Date] = [ new Date(now.getTime() - msInDay * 3), new Date(now.getTime() + msInDay * 3), ]; const min = new Date(now.setDate(1)); const max = new Date(now.setDate(lastDay)); function convertRangeToDays([startDate, endDate]: [Date, Date]) { const diffInDay = Math.floor(Math.abs((endDate.valueOf() - startDate.valueOf()) / msInDay)); return diffInDay + 1; } export default function App() { const [selectedDays, setSelectedDays] = useState(convertRangeToDays(initialValue)); const onCurrentValueChange = useCallback( ({ value: [startDate, endDate] }) => { let daysCount = 0; if (startDate && endDate) { daysCount = convertRangeToDays([startDate, endDate]); } setSelectedDays(daysCount); }, [setSelectedDays], ); return ( <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label multiline-label"> <span>Default functionality</span> <div className="selected-days-wrapper "> <span>Days selected: </span> <span>{selectedDays}</span> </div> </div> <div className="dx-field-value"> <DateRangeBox defaultValue={initialValue} onValueChanged={onCurrentValueChange} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Custom format</div> <div className="dx-field-value"> <DateRangeBox defaultValue={initialValue} displayFormat="EEEE, MMM dd" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Use buttons to apply selection</div> <div className="dx-field-value"> <DateRangeBox applyValueMode="useButtons" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Single-calendar view</div> <div className="dx-field-value"> <DateRangeBox multiView={false} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Calendar only appears on icon click</div> <div className="dx-field-value"> <DateRangeBox openOnFieldClick={false} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Limit available dates (this month)</div> <div className="dx-field-value"> <DateRangeBox min={min} max={max} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Disable out of range selection</div> <div className="dx-field-value"> <DateRangeBox disableOutOfRangeSelection={true} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Clear button</div> <div className="dx-field-value"> <DateRangeBox defaultValue={initialValue} showClearButton /> </div> </div> </div> ); }

import React, { useCallback, useState } from 'react'; import DateRangeBox from 'devextreme-react/date-range-box'; const msInDay = 1000 * 60 * 60 * 24; const now = new Date(); const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate(); const initialValue = [new Date(now.getTime() - msInDay * 3), new Date(now.getTime() + msInDay * 3)]; const min = new Date(now.setDate(1)); const max = new Date(now.setDate(lastDay)); function convertRangeToDays([startDate, endDate]) { const diffInDay = Math.floor(Math.abs((endDate.valueOf() - startDate.valueOf()) / msInDay)); return diffInDay + 1; } export default function App() { const [selectedDays, setSelectedDays] = useState(convertRangeToDays(initialValue)); const onCurrentValueChange = useCallback( ({ value: [startDate, endDate] }) => { let daysCount = 0; if (startDate && endDate) { daysCount = convertRangeToDays([startDate, endDate]); } setSelectedDays(daysCount); }, [setSelectedDays], ); return ( <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label multiline-label"> <span>Default functionality</span> <div className="selected-days-wrapper "> <span>Days selected: </span> <span>{selectedDays}</span> </div> </div> <div className="dx-field-value"> <DateRangeBox defaultValue={initialValue} onValueChanged={onCurrentValueChange} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Custom format</div> <div className="dx-field-value"> <DateRangeBox defaultValue={initialValue} displayFormat="EEEE, MMM dd" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Use buttons to apply selection</div> <div className="dx-field-value"> <DateRangeBox applyValueMode="useButtons" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Single-calendar view</div> <div className="dx-field-value"> <DateRangeBox multiView={false} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Calendar only appears on icon click</div> <div className="dx-field-value"> <DateRangeBox openOnFieldClick={false} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Limit available dates (this month)</div> <div className="dx-field-value"> <DateRangeBox min={min} max={max} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Disable out of range selection</div> <div className="dx-field-value"> <DateRangeBox disableOutOfRangeSelection={true} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Clear button</div> <div className="dx-field-value"> <DateRangeBox defaultValue={initialValue} showClearButton /> </div> </div> </div> ); }

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render(<App />, document.getElementById('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/23.2.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.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>

.demo-container { height: 690px; } .dx-field { padding: 8px; } .selected-days-wrapper { font-size: 12px; opacity: 0.5; } .multiline-label { padding-top: 0; }