> ## Documentation Index
> Fetch the complete documentation index at: https://docs.turbostack.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Date Range Picker

A date picker component with range and presets.

<img src="https://mintcdn.com/ravitechsolutions/jCk1IPeJr8ul3nyO/images/components/date-range-picker.png?fit=max&auto=format&n=jCk1IPeJr8ul3nyO&q=85&s=10fea35a86bc6bc9ecb887a8454ad9dd" alt="Date Range Picker" width="564" height="369" data-path="images/components/date-range-picker.png" />

## Usage

```ts theme={null}
import { DateRangePicker } from '@turbostack/ui'
```

```tsx theme={null}
const { start, end } = {
  start: subDays(new Date(), 30),
  end: new Date()
};

return (
  <DateRangePicker
    value={start && end ? {
      from: start,
      to: end
    } : undefined}
    onChange={(range => {
      if (!range || !range.from || !range.to) return;

      const { from, to } = range;

      // do something
    })}
  />
)
```