Your search did not match any results.

Date Range Box - 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.

Backend API

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.