@uswds/uswds/packages/usa-date-range-picker/src/test/date-range-picker-min-date-max-date.template.html

Open source UI components and visual style guide for U.S. government websites

<div>
  <div
    class="usa-date-range-picker"
    data-min-date="2020-05-22"
    data-max-date="2021-06-20"
  >
    <div class="usa-form-group">
      <label class="usa-label" for="appointment-date-start"
        >Appointment Date Start</label
      >
      <div class="usa-hint">mm/dd/yyyy</div>
      <div class="usa-date-picker">
        <input
          class="usa-input"
          id="appointment-date-start"
          name="appointment-date-start"
          type="text"
          required
        />
      </div>
    </div>

    <div class="usa-form-group">
      <label class="usa-label" for="appointment-date-end"
        >Appointment Date End</label
      >
      <div class="usa-hint">mm/dd/yyyy</div>
      <div class="usa-date-picker">
        <input
          class="usa-input"
          id="appointment-date-end"
          name="appointment-date-end"
          type="text"
          required
        />
      </div>
    </div>
  </div>
</div>