Date picker field

Date

HTML

    
<div class="input-field input-field--date-picker">
  <label>
    Date
    <input id="date-field" name=date-field data-toggle="datepicker" type="text" placeholder="dd/mm/yyyy"   />
  </label>
</div>

SCSS

    .input-field--date-picker {
  label {
    position: relative;
    display: block;
    width: 100%;
    max-width: 200px;

    &:after {
      position: absolute;
      bottom: -6px;
      right: 0;
      content: url('/images/icon-datepicker.svg')
    }
  }

  input[data-toggle="datepicker"] {
    width: 100%;
    max-width: 200px;
  }
}  

.datepicker-container {
  @include small-font;
  font-size: 17px !important;
}

Connect Dementia Research

Pattern Library

Date picker field

HTML

SCSS