Date Input
The Date input element defines a form control for the user to enter single line input.
Usage
Place a date input within a form. Each date input must have an associated label. The label for attribute must be identical to the input id attribute.
The label element must be directly underneath the input element.
NOTE: JavaScript is required to ensure the date input is digit only on all browsers.
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-form__control-date |
Default form date input. |
slb-form__control-date-block |
Block form date input. |
.slb-form__control-date - Default form control.
.slb-form__control-date-block - Block form control.
forms\date-input.hbs
<form>
<fieldset aria-label="Date">
<legend class="sr-only">Form label</legend>
<p class="slb-date-picker__heading">Form label<a href="#" class="slb-date-picker__legend-link" title="" target="_self"><span class="fa fa-info-circle"> </span></a></p>
<div class="slb-form__group-inline">
<input type="text" class="[modifier class]" id="exampleInputText-[modifier class]-dd" size="2" />
<label class="slb-form__label" for="exampleInputText-[modifier class]-dd">DD</label>
<span class="slb-form__bar"></span>
</div>
<div class="slb-form__group-inline">
<input type="text" class="[modifier class]" id="exampleInputText-[modifier class]-mm" size="2" />
<label class="slb-form__label" for="exampleInputText-[modifier class]-dd">MM</label>
<span class="slb-form__bar"></span>
</div>
<div class="slb-form__group-inline">
<input type="text" class="[modifier class]" id="exampleInputText-[modifier class]-yyyy" size="4" />
<label class="slb-form__label" for="exampleInputText-[modifier class]-dd">YYYY</label>
<span class="slb-form__bar"></span>
</div>
</fieldset>
</form>
Source:
components/forms/_form-control-date.scss