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.