Angular 1.5

Directive playground

by aubz88

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.js"></script>
<body ng-app="myApp">
    <div ng-controller="myController as accvm">
        <form name="accvm.addForm" novalidate>

            <div class="item item-input" ng-class="{ 'has-error' : accvm.addForm.time.$invalid }">
                <span class="input-label">'Time'</span>
                <input name="time" type="time" id="timeInput" max="{{ accvm.data.maxTime | date:'HH:mm' }}" ng-model="accvm.data.time" ng-change="accvm.timeChange()" style="text-align: right" required />
            </div>
			
        </form>
    </div>
</body>

CSS

label.item.has-error {
    border-left: 4px solid orange !important;
    border-right: 4px solid orange !important;
}

div.item.has-error {
    border-left: 4px solid orange !important;
    border-right: 4px solid orange !important;
}

.form-error {
    padding: 2px 0 2px 16px;
    color: orange;
}

JavaScript

angular
    .module('myApp', [])
    .controller('myController', function() {

        var vm = this;

        vm.data = {
            time: 0,
            maxTime: 0
        };

        vm.timeChange = function() {
            console.log(' time change ');
        };

        setInitialTimes();

        function setInitialTimes() {
            console.log(' set initial times ');
            var today = new Date();

            var time = new Date(
                today.getFullYear(),
                today.getMonth(),
                today.getDate(),
                today.getHours(),
                today.getMinutes(),
                0,
                0
            );

            vm.data.time = time;
            vm.data.maxTime = time;
            console.log(' max time ', vm.data.maxTime);
        }

    });