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

<!--
  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.
-->

<!-- Ranged -->
<div class="{{@root.prefix}}--form-item">
  <div data-date-picker data-date-picker-type="range"
    class="{{@root.prefix}}--date-picker {{@root.prefix}}--date-picker--range">
    <div class="{{@root.prefix}}--date-picker-container">
      <label for="date-picker-1" class="{{@root.prefix}}--label">Start date label</label>
      {{#if componentsX}}
      <div class="{{@root.prefix}}--date-picker-input__wrapper">
        <input type="text" id="date-picker-1" class="{{@root.prefix}}--date-picker__input"
          pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy" data-date-picker-input-from />
        {{ carbon-icon 'Calendar16' class=(add @root.prefix '--date-picker__icon') data-date-picker-icon="true" }}
      </div>
      {{else}}
      <input type="text" id="date-picker-1" class="{{@root.prefix}}--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}"
        placeholder="mm/dd/yyyy" data-date-picker-input-from />
      {{/if}}
    </div>
    <div class="{{@root.prefix}}--date-picker-container">
      <label for="date-picker-2" class="{{@root.prefix}}--label">End date label</label>
      {{#if componentsX}}
      <div class="{{@root.prefix}}--date-picker-input__wrapper">
        <input type="text" id="date-picker-2" class="{{@root.prefix}}--date-picker__input"
          pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy" data-date-picker-input-to />
        {{ carbon-icon 'Calendar16' class=(add @root.prefix '--date-picker__icon') data-date-picker-icon="true" }}
      </div>
      {{else}}
      <input type="text" id="date-picker-2" class="{{@root.prefix}}--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}"
        placeholder="mm/dd/yyyy" data-date-picker-input-to />
      {{/if}}
    </div>
    {{#unless componentsX}}
    <svg data-date-picker-icon class="{{@root.prefix}}--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
      <path
        d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
        fill-rule="nonzero" />
    </svg>
    {{/unless}}
  </div>
</div>