GroupCollect 1.3.142

Filter Date Range Picker

Basic filter date range picker with default placeholder Open in playground 
<div id="filter-date-range-picker-single-basic-storybook-wrapper" style="width: 100%; height: 600px;">
  <form>
    <.filter_date_range_picker
      id="filter-date-range-picker-single-basic"
      range_start_field_name="date_filter[start]"
      range_end_field_name="date_filter[end]"
      preset_field_name="date_filter[preset]"
    />
  </form>
</div>
With custom placeholder text Open in playground 
<div id="filter-date-range-picker-single-with-custom-placeholder-storybook-wrapper" style="width: 100%; height: 600px;">
  <form>
    <.filter_date_range_picker
      id="filter-date-range-picker-single-with-custom-placeholder"
      placeholder="Select date range"
      range_start_field_name="date_filter[start]"
      range_end_field_name="date_filter[end]"
      preset_field_name="date_filter[preset]"
    />
  </form>
</div>
With pre-selected date range Open in playground 
<div id="filter-date-range-picker-single-with-value-storybook-wrapper" style="width: 100%; height: 600px;">
  <form>
    <.filter_date_range_picker
      id="filter-date-range-picker-single-with-value"
      range_start={~D[2026-01-14]}
      range_end={~D[2026-01-20]}
      range_start_field_name="date_filter[start]"
      range_end_field_name="date_filter[end]"
      preset_field_name="date_filter[preset]"
    />
  </form>
</div>
With pre-selected preset Open in playground 
<div id="filter-date-range-picker-single-with-preset-id-storybook-wrapper" style="width: 100%; height: 600px;">
  <form>
    <.filter_date_range_picker
      id="filter-date-range-picker-single-with-preset-id"
      range_start_field_name="date_filter[start]"
      range_end_field_name="date_filter[end]"
      preset_field_name="date_filter[preset]"
      preset_id="preset_1"
      preset_options={[%{id: :preset_1, label: "Today", get_range: &Storybook.Form.FilterDateRangePicker.get_static_range/1}, %{id: :preset_2, label: "Week from today", get_range: &Storybook.Form.FilterDateRangePicker.get_range_for_week_from_today/1}]}
    />
  </form>
</div>
With min and max date constraints (2026-01-01 to 2028-12-31) Open in playground 
<div id="filter-date-range-picker-single-with-min-max-dates-storybook-wrapper" style="width: 100%; height: 600px;">
  <form>
    <.filter_date_range_picker
      id="filter-date-range-picker-single-with-min-max-dates"
      min_date={~D[2026-01-01]}
      max_date={~D[2028-12-31]}
      range_start_field_name="date_filter[start]"
      range_end_field_name="date_filter[end]"
      preset_field_name="date_filter[preset]"
    />
  </form>
</div>
With past date range (2021-01-01 to 2023-12-31) Open in playground 
<div id="filter-date-range-picker-single-with-past-dates-storybook-wrapper" style="width: 100%; height: 600px;">
  <form>
    <.filter_date_range_picker
      id="filter-date-range-picker-single-with-past-dates"
      min_date={~D[2021-01-01]}
      max_date={~D[2023-12-31]}
      range_start_field_name="date_filter[start]"
      range_end_field_name="date_filter[end]"
      preset_field_name="date_filter[preset]"
    />
  </form>
</div>
With custom preset options (pass preset_options as a list of maps containing id, label and get_range function which returns a tuple of start and end dates) Open in playground 
<div id="filter-date-range-picker-single-with-preset-options-storybook-wrapper" style="width: 100%; height: 600px;">
  <form>
    <.filter_date_range_picker
      id="filter-date-range-picker-single-with-preset-options"
      range_start_field_name="date_filter[start]"
      range_end_field_name="date_filter[end]"
      preset_field_name="date_filter[preset]"
      preset_options={[%{id: :today, label: "Today", get_range: &Storybook.Form.FilterDateRangePicker.get_range_for_today/1}, %{id: :week_from_today, label: "Week from today", get_range: &Storybook.Form.FilterDateRangePicker.get_range_for_week_from_today/1}]}
    />
  </form>
</div>
With validation errors on both inputs Open in playground 
<div id="filter-date-range-picker-single-with-errors-storybook-wrapper" style="width: 100%; height: 600px;">
  <form>
    <.filter_date_range_picker
      id="filter-date-range-picker-single-with-errors"
      range_start_field_name="date_filter[start]"
      range_start_field_errors={["Start date is required"]}
      range_end_field_name="date_filter[end]"
      range_end_field_errors={["End date is required"]}
      preset_field_name="date_filter[preset]"
    />
  </form>
</div>
With smaller trigger input Open in playground 
<div id="filter-date-range-picker-single-smaller-trigger-input-storybook-wrapper" style="width: 100%; height: 600px;">
  <form style="width: 300px; margin-left: auto;">
    <.filter_date_range_picker
      id="filter-date-range-picker-single-smaller-trigger-input"
      range_start_field_name="date_filter[start]"
      range_end_field_name="date_filter[end]"
      preset_field_name="date_filter[preset]"
    />
  </form>
</div>
With parent form Open in playground 
<.filter_date_range_picker
  id="filter-date-range-picker-single-with-parent-form"
  range_start_field_name="date_filter[start]"
  range_end_field_name="date_filter[end]"
  preset_field_name="date_filter[preset]"
/>