<form class="usa-form">
    <div class="usa-date-range-picker">
        <div class="usa-form-group">
            <label class="usa-label" id="event-date-start-label" for="event-date-start">Event start date</label>
            <div class="usa-hint" id="event-date-start-hint">mm/dd/yyyy</div>
            <div class="usa-date-picker">
                <input class="usa-input" id="event-date-start" name="event-date-start" type="text" aria-describedby="event-date-start-label event-date-start-hint">
            </div>
        </div>

        <div class="usa-form-group">
            <label class="usa-label" id="event-date-end-label" for="event-date-end">Event end date</label>
            <div class="usa-hint" id="event-date-end-hint">mm/dd/yyyy</div>
            <div class="usa-date-picker">
                <input class="usa-input" id="event-date-end" name="event-date-end" type="text" aria-describedby="event-date-end-label event-date-end-hint">
            </div>
        </div>
    </div>
</form>

There are no notes for this item.

<form class="usa-form">
  <div class="usa-date-range-picker">
    <div class="usa-form-group">
      <label class="usa-label" id="event-date-start-label" for="event-date-start">Event start date</label>
      <div class="usa-hint" id="event-date-start-hint">mm/dd/yyyy</div>
      <div class="usa-date-picker">
        <input class="usa-input" id="event-date-start" name="event-date-start" type="text" aria-describedby="event-date-start-label event-date-start-hint">
      </div>
    </div>

    <div class="usa-form-group">
      <label class="usa-label" id="event-date-end-label" for="event-date-end">Event end date</label>
      <div class="usa-hint" id="event-date-end-hint">mm/dd/yyyy</div>
      <div class="usa-date-picker">
        <input class="usa-input" id="event-date-end" name="event-date-end" type="text" aria-describedby="event-date-end-label event-date-end-hint">
      </div>
    </div>
  </div>
</form>
package:
  name: uswds
  version: 2.9.0
uswds:
  path: ../../dist
  • Handle: @date-range-picker
  • Preview:
  • Filesystem Path: src/components/07-form/controls/date-range-picker.njk