Angular Combos

Angular Date Picker

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"</script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script> 
<script src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script> 
<script src="https://raw.github.com/timrwood/moment/master/min/moment.min.js"></script>
    
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="http://angular-ui.github.com/angular-ui/build/angular-ui.min.css" rel="stylesheet" type="text/css">
<link href="http://ivaynberg.github.com/select2/select2-master/select2.css" rel="stylesheet" type="text/css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"> 

<div ng-app="app" class="container" ng-controller="Ctrl">
    
    <div class="row">        
        <div class="well span3">
            <!-- select year -->
            <label>Year</label>
            <select class="input-small" ui-select2 ng-model="year" type="text" value="2012" ng-change="reset()">
                <option ng-repeat="y in years">{{y.year}}</option>
            </select>
            <!-- select month -->
            <label></label>
            <label>Month</label>
            <select class="input-medium" ui-select2 ng-model="month" type="text" value="2012" ng-change="getDates()" >
                   <option...

CSS

.container{margin:2em;}
.ng-valid{border-color:green;}
.ng-invalid{border-color:red;}
.ng-pristine{}
.ng-dirty{}
.pointer{cursor:pointer;}

JavaScript

var app = angular.module("app", ['ui']);

function Ctrl($scope) {

    $scope.years = [{"year":"2012"},{"year": "2013"}];
    $scope.year="2012";
    $scope.month = "";
    $scope.day = "";
    $scope.dates = [];
    
    $scope.reset=function(){
        $scope.dates=[];         
    };
    
   
    $scope.getDates = function() {
        $scope.reset();                    
        var dt = $scope.year + '-' + $scope.month;
        var fmtMonth = 'YYYY-MM';
        var fmtDay = 'YYYY-MM-DD';
        var daysInMonth = moment(dt, fmtDay).daysInMonth();
        
        $scope.dates = [];
        for (var d = 1; d <= daysInMonth; d++) {
            var day = $scope.year + '-' + $scope.month + '-' + d
            var x = {
                "dt": moment(day, 'YYYY-MM-DD').format('DD-MMM-YYYY'), "description": moment(day, 'YYYY-MM-DD').format('dddd, Do')
            };
            $scope.dates.push(x);
        };
    };

    $scope.months = [
        {
        "id": 1,
        "name": "January"},
    {
        "id": 2,
        "name": "February"},
    {
        "id": 3,
        "name": "March"},
    {
        "id": 4,
        "name": "April"},
    {
        "id": 5,
        "name": "May"},
    {
        "id": 6,
        "name": "June"},
    {
        "id": 7,
        "name": "July"},
    {
        "id": 8,
        "name": "August"},
    {
        "id": 9,
        "name": "September"},
    {
        "id": 10,
        "name": "October"},
    {
        "id": 11,
        "name": "November"},
    {
        "id": 12,
        "name": "December"}
    ]

}