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

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">A date picker helps users select a single date using a calendar interface or text input.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-form_group>
  <c-label id="date-default" label="Date of birth" hint="mm/dd/yyyy" />
  <div class="usa-date-picker">
    <c-date_picker id="date-default" name="date_of_birth" />
  </div>
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Required</h2>
<c-form_group>
  <c-label id="date-required" label="Appointment date" hint="mm/dd/yyyy" required="true" />
  <div class="usa-date-picker">
    <c-date_picker id="date-required" name="appointment_date" required="required" />
  </div>
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Disabled</h2>
<c-form_group>
  <c-label id="date-disabled" label="Registration date" hint="mm/dd/yyyy" />
  <div class="usa-date-picker">
    <c-date_picker id="date-disabled" name="registration_date" disabled="disabled" />
  </div>
</c-form_group>
{% endblock %}