Components

Date Range Picker

A calendar-based component for date range selection.

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

Form Integration

Bind the date range picker to Phoenix forms using start_field and end_field attributes. Each date in the range is handled as a separate field in your schema. 

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

Use confirm mode to add an explicit confirmation step before finalizing the range selection. 

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

Display Format

Configure how the selected range is displayed using strftime patterns. The component formats both start and end dates according to the specified pattern separated by a dash. 

<.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.