carbon-components/src/components/date-picker/date-picker--range.html

Carbon Components is a component library for IBM Cloud

<!-- Ranged -->
<div class="bx--form-item">
  <div data-date-picker data-date-picker-type="range" class="bx--date-picker bx--date-picker--range">
    <div class="bx--date-picker-container">
      <label for="date-picker-1" class="bx--label">Start date label</label>
      <input type="text" id="date-picker-1" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
        data-date-picker-input-from />
      <div class="bx--form-requirement">
        Invalid date format.
      </div>
    </div>
    <div class="bx--date-picker-container">
      <label for="date-picker-2" class="bx--label">End date label</label>
      <input type="text" id="date-picker-2" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
        data-date-picker-input-to />
      <div class="bx--form-requirement">
        Invalid date format.
      </div>
    </div>
    <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
      <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
      <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
      <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
    </svg>
  </div>
</div>