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

The Carbon Design System is IBM’s open-source design system for products and experiences.

<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<!-- 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 bx--date-picker--light">
    <div class="bx--date-picker-container">
      <label for="date-picker-3" class="bx--label">Date Picker label</label>
      <div class="bx--date-picker-input__wrapper">
        <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 />
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" data-date-picker-icon="true" class="bx--date-picker__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M26,4h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V6C28,4.9,27.1,4,26,4z M26,26H6V12h20	V26z M26,10H6V6h4v2h2V6h8v2h2V6h4V10z"></path></svg>
      </div>
    </div>
  </div>
</div>

<!-- 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 bx--date-picker--light">
    <div class="bx--date-picker-container">
      <label for="date-picker-3" class="bx--label">Date Picker label</label>
      <div class="bx--date-picker-input__wrapper">
        <input data-invalid 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 />
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" data-date-picker-icon="true" class="bx--date-picker__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M26,4h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V6C28,4.9,27.1,4,26,4z M26,26H6V12h20	V26z M26,10H6V6h4v2h2V6h8v2h2V6h4V10z"></path></svg>
      </div>
      <div class="bx--form-requirement">
        Invalid date format.
      </div>
    </div>
  </div>
</div>