Date Range Picker

Pick start and end dates with preset ranges and intuitive calendar navigation.

Basic

<.date_range_picker start_name="vacation_start" end_name="vacation_end" />

Form Integration

Changes: %{}

<.form :let={f} for={to_form(%{})} phx-change="validate">
  <.date_range_picker
    start_field={f[:departure_date]}
    end_field={f[:return_date]}
    min={Date.utc_today()}
    max={Date.add(Date.utc_today(), 365)}
    navigation="extended"
    placeholder="Flight date"
  />
</.form>

Closing Strategy

<.date_range_picker
  close="confirm"
  start_name="vacation_start"
  end_name="vacation_end"
/>

Display Format

<.date_range_picker
  start_name="vacation_start"
  end_name="vacation_end"
  display_format="%b %d"
  start_value={Date.utc_today()}
  end_value={Date.add(Date.utc_today(), 4)}
/>

The date range picker shares many features with the date picker component. See the date picker documentation for detailed information about these features.