# date-range-picker — Examples

## Canonical

```html
<field-ui label="Report period">
  <date-range-picker-ui
    name="report-period"
    min="2026-01-01"
    max="2026-12-31">
  </date-range-picker-ui>
</field-ui>
```

## Comparison mode

```html
<date-range-picker-ui
  name="period"
  comparison
  value='{"from":"2026-05-01","to":"2026-05-31"}'
  compare-value='{"from":"2026-04-01","to":"2026-04-30"}'>
</date-range-picker-ui>
```

## Custom presets

```html
<date-range-picker-ui id="dr" name="period"></date-range-picker-ui>
<script>
  document.getElementById('dr').presets = [
    { label: 'Q1', range: { from: '2026-01-01', to: '2026-03-31' } },
    { label: 'Q2', range: { from: '2026-04-01', to: '2026-06-30' } },
    { label: 'YTD', range: { from: '2026-01-01', to: '2026-05-24' } },
  ];
</script>
```
