{% extends "demo_app/pattern_base.html" %}

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">A date range picker allows users to select a start and end date using a pair of date pickers.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-date_range_picker
  start_date_id="start-date-default"
  start_date_name="start_date"
  start_date_label="Start date"
  start_date_hint="mm/dd/yyyy"
  end_date_id="end-date-default"
  end_date_name="end_date"
  end_date_label="End date"
  end_date_hint="mm/dd/yyyy"
/>

<h2 class="font-heading-xl margin-top-4">Required</h2>
<c-date_range_picker
  start_date_id="start-date-required"
  start_date_name="travel_start"
  start_date_label="Travel start date"
  start_date_hint="mm/dd/yyyy"
  end_date_id="end-date-required"
  end_date_name="travel_end"
  end_date_label="Travel end date"
  end_date_hint="mm/dd/yyyy"
  required="required"
/>

<h2 class="font-heading-xl margin-top-4">Disabled</h2>
<c-date_range_picker
  start_date_id="start-date-disabled"
  start_date_name="enrollment_start"
  start_date_label="Enrollment period start"
  start_date_hint="mm/dd/yyyy"
  end_date_id="end-date-disabled"
  end_date_name="enrollment_end"
  end_date_label="Enrollment period end"
  end_date_hint="mm/dd/yyyy"
  disabled="disabled"
/>
{% endblock %}