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

Carbon Components is a component library for IBM Cloud

<!-- 
  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 without calendar (mm/yy only) -->
<div class="bx--form-item">
  <div class="bx--date-picker bx--date-picker--simple bx--date-picker--short bx--date-picker--light">
    <div class="bx--date-picker-container">
      <label for="date-picker-4" class="bx--label">Date Picker label</label>
      <input type="text" id="date-picker-4" class="bx--date-picker__input" pattern="\d{1,2}/\d{4}" placeholder="mm/yyyy" data-date-picker-input
      />
    </div>
  </div>
</div>

<!-- Basic without calendar -->
<div class="bx--form-item">
  <div class="bx--date-picker bx--date-picker--simple bx--date-picker--light">
    <div class="bx--date-picker-container">
      <label for="date-picker-6" class="bx--label">Date Picker label</label>
      <input data-invalid type="text" id="date-picker-6" 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>