18F/web-design-standards

<div class="usa-form-group">
  <label class="usa-label" id="appointment-date-label" for="appointment-date">Appointment date</label>
  <div class="usa-hint" id="appointment-date-hint">mm/dd/yyyy</div>
  <div class="usa-date-picker"
    {% if defaultDate %} data-default-value="{{ defaultDate }}"{% endif %}
    {% if rangeDate %} data-range-date="{{ rangeDate }}"{% endif %}
    {% if restrictedDateStart %} data-min-date="{{ restrictedDateStart }}"{% endif %}
    {% if restrictedDateEnd %} data-max-date="{{ restrictedDateEnd }}"{% endif %}
  >
    <input
      class="usa-input"
      id="appointment-date"
      name="appointment-date"
      type="text"
      aria-labelledby="appointment-date-label"
      aria-describedby="appointment-date-hint"
      {% if disabled_state == 'disabled' %} disabled {%- endif %}
      {% if disabled_state == 'aria-disabled' %} aria-disabled="true" {%- endif %}
    >
  </div>
</div>