JSFiddle - React, Tailwind, and code Playground

by GruffBunny

HTML

<div ng-app='MyModule' ng-controller='MyController'>
    <h1>Tasks</h1>
        <div ng-repeat='task in tasks'>
            {{task | json}} - <due-date task='task'></due-date>
        </div>
</div>

JavaScript

angular.module('MyModule', [])

	.directive('dueDate', function($filter) {

		return{
			restrict: 'E',
			scope: {
				task: '='
			},
			replace: true,
			template: '<span class="task-duedate"> \
						    <span class="date-daymon">{{daymon}}</span> \
						    <span class="date-year">{{year}}</span> \
						    <span class="date-time">@ {{time}}</span> \
					   </span>',
			link: function(scope){

				if( scope.task.daily ){
					scope.daymon = 'Daily';
                }
				else {
					scope.daymon = $filter('date')(scope.task.dueDate, 'MMM d');
					scope.year = $filter('date')(scope.task.dueDate, 'yyyy');
				}
        
				scope.time = $filter('date')(scope.task.dueDate, 'h a');
			}
		};
	})
    
.controller( 'MyController', function($scope, $timeout){
    
    $scope.tasks = [
        { id: 1, dueDate: new Date( 2014, 5, 13, 13, 30, 0 ), daily: false },
        { id: 2, dueDate: new Date( 2014, 11, 3, 9, 25, 0 ), daily: true }
    ];
    
    $scope.selectedTask = null;
    
    $scope.selectTask = function(task){
        $scope.selectedTask = task;
    }
});