DAHLIA Pattern Library

Angular Dob Form 

<div class="form-group" ng-class="{ error: (inputInvalid('date_of_birth_day') || inputInvalid('date_of_birth_month') || inputInvalid('date_of_birth_year')) }">
    <h3 class="form-label caps">Your Date of Birth</h3>
    <div class="form-date-of-birth row collapse">
        <div class="form-group-month large-2 columns">
            <label class="sr-only" for="date_of_birth_month">Day</label>
            <input aria-describedby="date_of_birth_error" autocomplete="off" class="no-margin" id="date_of_birth_month" maxlength="2" name="date_of_birth_month" ng-change="recheckDOB('applicant')" ng-class="{ error: inputInvalid('date_of_birth_month') }" ng-model="applicant.dob_month"
                ng-required="true" numeric-only="" pattern="\d*" placeholder="MM" type="text" ui-validate="'DOBValid(\'month\', $value)'">
        </div>
        <div class="form-group-day large-2 columns">
            <label class="sr-only" for="date_of_birth_day">Month</label>
            <input aria-describedby="date_of_birth_error" autocomplete="off" class="no-margin" id="date_of_birth_day" maxlength="2" name="date_of_birth_day" ng-change="recheckDOB('applicant')" ng-class="{ error: inputInvalid('date_of_birth_day') }" ng-model="applicant.dob_day"
                ng-required="true" numeric-only="" pattern="\d*" placeholder="DD" type="text" ui-validate="'DOBValid(\'day\', $value)'">
        </div>
        <div class="form-group-year large-2 columns end">
            <label class="sr-only" for="date_of_birth_year">Year</label>
            <input aria-describedby="date_of_birth_error" autocomplete="off" class="no-margin" id="date_of_birth_year" maxlength="4" name="date_of_birth_year" ng-change="recheckDOB('applicant')" ng-class="{ error: inputInvalid('date_of_birth_year') }" ng-model="applicant.dob_year"
                ng-required="true" numeric-only="" pattern="\d*" placeholder="YYYY" type="text" ui-validate="'DOBValid(\'year\', $value) && !primaryApplicantUnder18($value)'">
        </div>
    </div>

    <small class="error" id="date_of_birth_error" ng-if="inputInvalid('date_of_birth_day') || inputInvalid('date_of_birth_month') || inputInvalid('date_of_birth_year')">
    <span ng-if="!primaryApplicantUnder18()">Please enter a valid Date of Birth</span>
    <span ng-if="primaryApplicantUnder18()">The primary applicant must be 18 years of age or older.</span>
  </small>
</div>
 
<div class="form-group" ng-class="{ error: (inputInvalid('date_of_birth_day') || inputInvalid('date_of_birth_month') || inputInvalid('date_of_birth_year')) }">
  <h3 class="form-label caps">Your Date of Birth</h3>
  <div class="form-date-of-birth row collapse">
    <div class="form-group-month large-2 columns">
      <label class="sr-only" for="date_of_birth_month">Day</label>
      <input aria-describedby="date_of_birth_error" autocomplete="off" class="no-margin" id="date_of_birth_month" maxlength="2" name="date_of_birth_month" ng-change="recheckDOB('applicant')" ng-class="{ error: inputInvalid('date_of_birth_month') }" ng-model="applicant.dob_month" ng-required="true" numeric-only="" pattern="\d*" placeholder="MM" type="text" ui-validate="'DOBValid(\'month\', $value)'">
    </div>
    <div class="form-group-day large-2 columns">
      <label class="sr-only" for="date_of_birth_day">Month</label>
      <input aria-describedby="date_of_birth_error" autocomplete="off" class="no-margin" id="date_of_birth_day" maxlength="2" name="date_of_birth_day" ng-change="recheckDOB('applicant')" ng-class="{ error: inputInvalid('date_of_birth_day') }" ng-model="applicant.dob_day" ng-required="true" numeric-only="" pattern="\d*" placeholder="DD" type="text" ui-validate="'DOBValid(\'day\', $value)'">
    </div>
    <div class="form-group-year large-2 columns end">
      <label class="sr-only" for="date_of_birth_year">Year</label>
      <input aria-describedby="date_of_birth_error" autocomplete="off" class="no-margin" id="date_of_birth_year" maxlength="4" name="date_of_birth_year" ng-change="recheckDOB('applicant')" ng-class="{ error: inputInvalid('date_of_birth_year') }" ng-model="applicant.dob_year" ng-required="true" numeric-only="" pattern="\d*" placeholder="YYYY" type="text" ui-validate="'DOBValid(\'year\', $value) && !primaryApplicantUnder18($value)'">
    </div>
  </div>

  <small class="error" id="date_of_birth_error" ng-if="inputInvalid('date_of_birth_day') || inputInvalid('date_of_birth_month') || inputInvalid('date_of_birth_year')">
    <span ng-if="!primaryApplicantUnder18()">Please enter a valid Date of Birth</span>
    <span ng-if="primaryApplicantUnder18()">The primary applicant must be 18 years of age or older.</span>
  </small>
</div>
 
{
  "inputs": {
    "states": [
      {
        "name": "Alabama",
        "attr": "AL"
      },
      {
        "name": "Alaska",
        "attr": "AK"
      },
      {
        "name": "Arizona",
        "attr": "AK"
      },
      {
        "name": "Arkansas",
        "attr": "AK"
      },
      {
        "name": "California",
        "attr": "CA"
      },
      {
        "name": "Colorado",
        "attr": "CO"
      },
      {
        "name": "Connecticut",
        "attr": "CT"
      },
      {
        "name": "Delaware",
        "attr": "DE"
      },
      {
        "name": "District Of Columbia",
        "attr": "DC"
      },
      {
        "name": "Florida",
        "attr": "FL"
      },
      {
        "name": "Georgia",
        "attr": "GA"
      },
      {
        "name": "Hawaii",
        "attr": "HI"
      },
      {
        "name": "Idaho",
        "attr": "ID"
      },
      {
        "name": "Illinois",
        "attr": "IL"
      },
      {
        "name": "Indiana",
        "attr": "IN"
      },
      {
        "name": "Iowa",
        "attr": "IA"
      },
      {
        "name": "Kansas",
        "attr": "KS"
      },
      {
        "name": "Kentucky",
        "attr": "KY"
      },
      {
        "name": "Louisiana",
        "attr": "LA"
      },
      {
        "name": "Maine",
        "attr": "ME"
      },
      {
        "name": "Maryland",
        "attr": "MD"
      },
      {
        "name": "Massachusetts",
        "attr": "MA"
      },
      {
        "name": "Michigan",
        "attr": "MI"
      },
      {
        "name": "Minnesota",
        "attr": "MN"
      },
      {
        "name": "Mississippi",
        "attr": "MS"
      },
      {
        "name": "Missouri",
        "attr": "MO"
      },
      {
        "name": "Montana",
        "attr": "MT"
      },
      {
        "name": "Nebraska",
        "attr": "NE"
      },
      {
        "name": "Nevada",
        "attr": "NV"
      },
      {
        "name": "New Hampshire",
        "attr": "NH"
      },
      {
        "name": "New Jersey",
        "attr": "NJ"
      },
      {
        "name": "New Mexico",
        "attr": "NM"
      },
      {
        "name": "New York",
        "attr": "NY"
      },
      {
        "name": "North Carolina",
        "attr": "NC"
      },
      {
        "name": "North Dakota",
        "attr": "ND"
      },
      {
        "name": "Ohio",
        "attr": "OH"
      },
      {
        "name": "Oklahoma",
        "attr": "OK"
      },
      {
        "name": "Oregon",
        "attr": "OR"
      },
      {
        "name": "Pennsylvania",
        "attr": "PA"
      },
      {
        "name": "Rhode Island",
        "attr": "RI"
      },
      {
        "name": "South Carolina",
        "attr": "SC"
      },
      {
        "name": "South Dakota",
        "attr": "SD"
      },
      {
        "name": "Tennessee",
        "attr": "TN"
      },
      {
        "name": "Texas",
        "attr": "TX"
      },
      {
        "name": "Utah",
        "attr": "UT"
      },
      {
        "name": "Vermont",
        "attr": "VT"
      },
      {
        "name": "Virginia",
        "attr": "VA"
      },
      {
        "name": "Washington",
        "attr": "WA"
      },
      {
        "name": "West Virginia",
        "attr": "WV"
      },
      {
        "name": "Wisconsin",
        "attr": "WI"
      },
      {
        "name": "Wyoming",
        "attr": "WY"
      }
    ]
  }
}

There are no notes for this item.