Dynamic DatePicker

Populate date fields with less tedium

by kshep92

HTML

<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<div ng-controller="dateController">
    <select name="month">
        <option value="{{month.day}}" ng-repeat="month in months">{{month.name}}</option>
    </select>
    <select name="day">
        <option value="{{day}}" ng-repeat="day in days">{{day}}</option>
    </select>
    <select name="year">
        <option value="{{year}}" ng-repeat="year in years">{{year}}</option>
    </select>
    {{name}}
</div>

JavaScript

angular.module("datePicker", []);

function dateController($scope) {
$scope.days = [];
    $scope.months = [];
    $scope.years = [];
    
    //Days
    for(i=1; i<=31; i++) {
 var j;
        if(i<10) {
        j = '0'+i;
        }        
        else {
        j = i+'';
        }
        $scope.days.push(j);
    }
    
    //Months
    var theDate = new Date();
    for(i=0; i<12; i++) {
        var month = {};
        var j;
        theDate.setMonth(i);
        month.name = theDate.toString().substr(4,3);
        if(i<10) {
        j = '0'+(i+1);
        }
        else {
        j = (i+1)+'';
        }
        month.day = j;
        $scope.months.push(month);
    }
    
    //Years
    var currentYear = theDate.getFullYear();
    var minYear = currentYear - 18;
    var maxYear = minYear - 100;
    
    for(i=minYear; i>maxYear; i--) {
    $scope.years.push(i+'');
    }
}