DAHLIA Pattern Library

Input Dob: Default 

<div class="form-date-of-birth row collapse">
    <div class="form-group-month large-2 columns">
        <label for="date_of_birth_1" class="sr-only">MM</label>
        <input type="number" name="date_of_birth_1" min="1" max="12" placeholder="MM" />
    </div>
    <div class="form-group-day large-2 columns">
        <label for="date_of_birth_2" class="sr-only">DD</label>
        <input type="number" name="date_of_birth_2" min="1" max="31" placeholder="DD" />
    </div>
    <div class="form-group-year large-2 columns end">
        <label for="date_of_birth_3" class="sr-only">YYYY</label>
        <input type="number" name="date_of_birth_3" min="1900" max="2016" placeholder="YYYY" />
    </div>
</div>
 
<div class="form-date-of-birth row collapse">
  <div class="form-group-month large-2 columns">
    <label for="date_of_birth_1" class="sr-only">{{default month-label 'MM'}}</label>
    <input type="number" name="date_of_birth_1" min="1" max="12" placeholder="{{default month 'MM'}}" {{default readonly ''}} />
  </div>
  <div class="form-group-day large-2 columns">
    <label for="date_of_birth_2" class="sr-only">{{default day-label 'DD'}}</label>
    <input type="number" name="date_of_birth_2" min="1" max="31" placeholder="{{default day 'DD'}}" {{default readonly ''}} />
  </div>
  <div class="form-group-year large-2 columns end">
    <label for="date_of_birth_3" class="sr-only">{{default year-label 'YYYY'}}</label>
    <input type="number" name="date_of_birth_3" min="1900" max="2016" placeholder="{{default year 'YYYY'}}" {{default readonly ''}} />
  </div>
</div>
 
/* No context defined for this component. */

Uses HTML5 number input for quick date entry. Use this format for most dates, particularly memorized dates.