packages/datetime/src/components/date-range-input/date-range-input.md
@# DateRangeInput
The DateRangeInput component renders a ControlGroup composed of two InputGroups and shows a DateRangePicker inside a Popover upon focus.
Unlike DateInput, this component does not yet have support for a built-in TimezoneSelect.
<!-- It optionally shows a [TimezoneSelect](#datetime/timezone-select) as the third element in the ControlGroup, allowing the user to change the timezone of the selected date range. -->@## Import
import { DateRangeInput } from "@blueprintjs/datetime";
@reactExample DateRangeInputExample
@## Usage
DateRangeInput supports both controlled and uncontrolled usage. You can control the selected date by setting the
value prop, or use the component in uncontrolled mode and specify an initial date by setting defaultValue.
Use the onChange prop callback to listen for changes to the selected day and the onError prop to react to invalid
dates entered in the text inputs.
@## Date formatting
You may customize the date display format with the required formatDate and parseDate props.
See DateInput's date formatting docs for more details.
@## Props interface
@interface DateRangeInputProps
@## Localization
See the DatePicker localization docs.