JSFiddle - React, Tailwind, and code Playground

by Adam Doherty

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<div class="row date" ng-app="myForm" ng-controller="myFormController">
    <div id="dob-year" class="input-wrapper small-4 columns">
        <select name="year" id="year" ng-model="year" ng-change="updateDate('year')" onchange="changeMe(this)" required>
            <option value='' disabled>Year</option>
            <option value='1997'>1997</option>
            <option value='1996'>1996</option>
            <option value='1995'>1995</option>
        </select>
    </div>
    <div id="dob-month" class="input-wrapper small-4 columns">
        <select name="month" ng-model="month" ng-change="updateDate('month')" onchange="changeMe(this)" required>
            <option value='' disabled>Month</option>
            <option value="{{$index + 1}}" ng-repeat="m in months" ng-hide="year==over18Year && {{$index + 1}}> over18Month">{{m}}</option>
        </select>
    </div>
    <div id="dob-day" class="input-wrapper small-4 columns">
        <select name="day" ng-model="day" ng-change="updateDate('day')" onchange="changeMe(this)" required>
            <option value='' disabled>Day</option>
            <option ng-repeat="d in days" ng-hide="year == over18Year && month == over18Month && d > over18Day">{{d}}</option>
            <option ng-hide="month == 2 && year % 4 > 0 || (year == over18Year && month == over18Month && 29 > over18Day)">29</option>
            <option ng-hide="month == 2 || (year == over18Year && month == over18Month && 30 > over18Day)">30</option>
            <option ng-hide="month == 2 || month == 4 || month == 6 || month == 9 || month == 11 || (year == over18Year && month == over18Month && 31 > over18Day)">31</option>
        </select>
    </div>
</div>

CSS

select {
    color: #ccc;
}
option {
    color: #000;
}
option:first-child {
    color: #ccc;
}

JavaScript

function changeMe(sel) {
    sel.style.color = "#000";
}

var app = angular.module('myForm', []);
app.controller('myFormController', function ($scope) {

    $scope.fieldValues = {
        dateOfBirth: "",
    };

    /*Date Of Birth*/

    $scope.days = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28];
    $scope.months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

    var now = new Date();
    $scope.year = '';
    $scope.month = '';
    $scope.day = '';
    $scope.over18Year = now.getUTCFullYear() - 18; //1997
    $scope.over18Month = now.getUTCMonth() + 1;
    $scope.over18Day = now.getUTCDate();

    $scope.updateDate = function (input) {
        if (input == "year") {
            $scope.month = "";
            $scope.day = "";
            if (input == $scope.over18Year) {
                var month = $('#month');
                for (var i = $scope.over18Month; i <= 12; i++) {
                    var opt = $scope.months[i];
                    var el = document.createElement("option");
                    el.textContent = opt;
                    el.value = opt;
                    month.append(el);
                }
            }
        } else if (input == "month") {
            $scope.day = "";
        }
        if ($scope.year && $scope.month && $scope.day) {
            $scope.fieldValues.dateOfBirth = new Date($scope.year, $scope.month - 1, $scope.day);
        }
    };

});