@carbon/charts
Version:
Carbon charting components
30 lines (27 loc) • 1.91 kB
HTML
<!--
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="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>
<div class="bx--date-picker-input__wrapper">
<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 />
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" data-date-picker-icon="true" class="bx--date-picker__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 2h-2V1h-1v1H6V1H5v1H3c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1zm0 11H3V6h10v7zm0-8H3V3h2v1h1V3h4v1h1V3h2v2z"></path></svg>
</div>
</div>
<div class="bx--date-picker-container">
<label for="date-picker-2" class="bx--label">End date label</label>
<div class="bx--date-picker-input__wrapper">
<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 />
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" data-date-picker-icon="true" class="bx--date-picker__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 2h-2V1h-1v1H6V1H5v1H3c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1zm0 11H3V6h10v7zm0-8H3V3h2v1h1V3h4v1h1V3h2v2z"></path></svg>
</div>
</div>
</div>
</div>