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

Carbon Components is a component library for IBM Cloud

<!-- Basic with calendar -->
<div class="bx--form-item">
  <div data-date-picker data-date-picker-type="single" class="bx--date-picker bx--date-picker--single">
    <div class="bx--date-picker-container">
      <label for="date-picker-3" class="bx--label">Date Picker label</label>
      <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>
      <input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
        data-date-picker-input />
      <div class="bx--form-requirement">
        Invalid date format.
      </div>
    </div>
  </div>
</div>